Toggling list image and expand all jquery accordion w/ unordered lists
- by Evan
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/
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;
}
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
