I am trying to swap images of collapse all and expand all on click but i am reallly not getting it please can any one help me ... thanks in advance
here is the the link for the sample http://www.ornusweb.com/showcase/checking/collapsible-menu.html everything is working fine except the expan all collapse all buttons wen we click on it. it should swap images
please help me !!!
Here is the css
body { font: 10pt Arial, Helvetica, Sans-serif; } a { text-decoration: none; } #example1, #example2, #example3, #example4, #example5 { float: left; } .expand_all{ cursor: pointer; } .collapse_all { cursor: pointer; } .example_menu { font-size: 90%; list-style: none; margin: 0; padding: 0; vertical-align: top; width: 624px; } .example_menu ul { display: none; list-style: none; padding: 0; } #menu1, #menu2, #menu3, #menu4, #menu5 { margin: 0; } #menu1 li, #menu2 li, #menu3 li, #menu4 li, #menu5 li, .example_menu li { background-image: none; margin: 0; padding-bottom: 1px; } .example_menu ul ul { display: block; } .example_menu ul ul li a { padding-left: 20px; width: 109px; } .example_menu a { color: #000; cursor: pointer; display: block; font-weight: bold; margin-left: 0; padding: 10px 2px 2px 17px; width: 605px; height: 24px; } .example_menu a.expanded { background: #E8E8E8 url('images/minusimg1.png') no-repeat 592px 50%; } .example_menu a.collapsed { background: #E8E8E8 url('images/plusimg1.png') no-repeat 592px 50%; } .example_menu a:hover { text-decoration: none; } .example_menu ul a { background: #e8e8e8; border-top: 2px solid #fff; color: #000; display: block; font-weight: normal; padding: 2px 2px 2px 10px; width: 119px; } .example_menu ul a:link { font-weight: normal; } .example_menu ul a:hover { background : #f5f5f5; text-decoration: underline; } .example_menu li.active a { background: #fff; } .example_menu li.active li a { background: #e8e8e8; } #menu1 li.footer, #menu2 li.footer, #menu3 li.footer, #menu4 li.footer, #menu5 li.footer, .example_menu .footer { background: transparent url('images/footer.jpg') no-repeat 0 0; border-top: 2px solid #fff; height: 9px; line-height: 15px; margin: 0 0 10px 0; width: 131px; } .example_menu .footer span { display: none; } /* nadeem css */ .newstyles{ font: 20px/18px arial;color: #0B0B0C;margin: 5px 0px 20px 5px;} .newstyles li{ height: 32px;font: bold 12px/32px arial;color: #0B0B0C;} .newstyline{clear: both;height: 1px;background-color: #E6E6E6;width: 100%;margin: 1px 0px 3px 0px;} } here is the js
$(document).ready(function() { setTimeout(function() { // Slide $('#menu1 > li > a.expanded + ul').slideToggle('medium'); $('#menu1 > li > a').click(function() { $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').slideToggle('medium'); }); $('#example1 .expand_all').click(function() { $('#menu1 > li > a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').slideDown('medium'); }); $('#example1 .collapse_all').click(function() { $('#menu1 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').slideUp('medium'); }); }, 250); }); and here is the html
<div id="example1"> <div><a class="expand_all"><img src="images/close.jpg" class="img-swap" /></a><a class="collapse_all"><img src="images/open.jpg" alt="" /></a></div> <ul id="menu1" class="example_menu"> <li><a class="expanded">Section A</a> <ul class="newstyles"> <li>Link A-A</li> <div class="newstyline"> </div> <li>Link A-B</li> <div class="newstyline"> </div> <li>Link A-C</li> <div class="newstyline"> </div> <li>Link A-D</li> </ul> </li> <li><a class="expanded">Section B</a> <ul class="newstyles"> <li>Link A-A</li> <div class="newstyline"> </div> <li>Link A-B</li> <div class="newstyline"> </div> <li>Link A-C</li> <div class="newstyline"> </div> <li>Link A-D</li> </ul> </li> <li><a class="expanded">Section C</a> <ul class="newstyles"> <li>Link A-A</li> <div class="newstyline"> </div> <li>Link A-B</li> <div class="newstyline"> </div> <li>Link A-C</li> <div class="newstyline"> </div> <li>Link A-D</li> </ul> </li> </ul> </div>