CODEWITHSUNDEEP
jquery
jhunlio
jhunlio

Reputation: 2660

jquery - simple accordion

Its a simple Accordion, this is what I want Here but i need to edit the HTML code to pass the validation. And I don't know how to customize the jquery. my sample code is here

Origal code:

<ul id="accordion">
    <li>Sports</li>
    <ul>
      <li><a href="#">Golf</a></li>
      <li><a href="#">Cricket</a></li>
      <li><a href="#">Football</a></li>
    </ul>
<li>Latest</li>
        <ul>
          <li><a href="#">Golf</a></li>
          <li><a href="#">Cricket</a></li>
          <li><a href="#">Football</a></li>
        </ul>
</ul>

to this code: 

<ul id="accordion">
    <li>Sports
    <ul>
      <li><a href="#">Golf</a></li>
      <li><a href="#">Cricket</a></li>
      <li><a href="#">Football</a></li>
    </ul>
  </li>
<li>Latest
        <ul>
          <li><a href="#">Golf</a></li>
          <li><a href="#">Cricket</a></li>
          <li><a href="#">Football</a></li>
        </ul> 
 </li>
 </ul>

Upvotes: 2

Views: 2177

Answers (1)

Dan L.
Dan L.

Reputation: 73

Modify your javascript from the jsfiddle to this:

$("#accordion > li").click(function(){
  $('.active').removeClass('active');

  $(this).addClass('active');
    if(false == $(this).find('ul').is(':visible')) {
        $('#accordion > ul').slideUp(300);
    }
    $(this).find('ul').slideToggle(300);
});

var animationIsOff = $.fx.off;
$.fx.off = true;
$('#accordion > li:eq(0)').click()
$.fx.off = animationIsOff;

Upvotes: 1

Related Questions