CODEWITHSUNDEEP
javascriptjqueryjquery-uiaccordion
Evan
Evan

Reputation: 3511

Toggling list image and expand all jquery accordion w/ unordered lists

I have a functioning jquery accordion using pure unordered lists. I'm trying to incorporate 2 pieces of functionality.

Here is my functioning accordion code and a demo of it working. http://jsbin.com/itibi4/

  1. Toggling Arrows.

i'm tring to get the parent bullets to be a toggling arrow and point down when clicked while the child bullets stay as bullets instead of an arrow. Would I be able to get some help with this?

.inactive { 
background-image:url("http://img547.imageshack.us/img547/4103/arrowp.gif");
background-position:4px -31px;
background-repeat:no-repeat;
cursor:pointer;
padding-left:20px;
padding-top:10px;
}

.active {
background-image: url("http://img547.imageshack.us/img547/4103/arrowp.gif");
background-position: 4px 12px;
background-repeat:no-repeat;
font-weight:bold;
}
  1. Expand All / Collapse All

also, i'm trying to incorporate an expand all / collapse all functionality. this is code to the same demo the code is from a previous project, which i've added below the unordered list menu, but i'm having difficulty incorporating it into this project. Would I be able to get some help with this?

$('.swap').click(function()

          {
            if($(this).text() == 'Click to Collapse All FAQs')
            {
              $('ul.menu').slideUp('normal');
              $('ul.menu li a').removeClass('active');
              $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
            }
            else
            {
              $('ul.menu').slideDown('normal');
              $('ul.menu li a').addClass('active');
              $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
            }
          }

Thank you so much for your help!

Evan

Upvotes: 1

Views: 1347

Answers (1)

jamesmortensen
jamesmortensen

Reputation: 34068

I don't see a closing parentheses at the end of your click handler:

 $('.swap').click(function()

      {
         if($(this).text() == 'Click to Collapse All FAQs')
         {
           $('ul.menu').slideUp('normal');
           $('ul.menu li a').removeClass('active');
           $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
         }
         else
         {
           $('ul.menu').slideDown('normal');
           $('ul.menu li a').addClass('active');
           $(this).text($(this).text() == 'Click to Expand All FAQs' ? 'Click to Collapse All FAQs' : 'Click to Expand All FAQs');
         }
      }

  );  // this was missing!

I added your function in my Chrome JavaScript console, and it worked.

As for your arrows, the following rule currently makes them point to the right:

ul.menu li

If you create a copy of that rule called ul.menu li.down and make the following changes:

      background-position: 4px 0px;
      padding-top: 0px;

Then make sure class="down" is bound to the arrows you want to be pointing down. You may have to tweak these values, but this will definitely get you started.

Upvotes: 1

Related Questions