Reputation: 11

jQuery accordion active state

Navigation

<ul id="accordion">
  <li> 
    <a class="open_link"  href="#">1</a>
    <ul class="sub_accardion ">
      <li>
        <a class="sub_link"  href="#">1.1</a>
        <ul>
          <li><a href="#">1.1.1</a></li>    
          <li><a href="#">1.1.1</a></li>    
          <li><a href="#">1.1.1</a></li>    
        </ul>
      </li>
      <li>
        <a class="sub_link"  href="#">1.2</a>
        <ul>
          <li><a href="#">1.2.1</a></li>    
          <li><a href="#">1.2.1</a></li>    
          <li><a href="#">1.2.1</a></li>    
        </ul>
      </li>
    </ul>
  </li> 
</ul>

jQuery

<script type="text/javascript" >
$(function() {
    $( "#accordion" ).accordion({   
        header: '.open_link',       
        active: "false",
        heightStyle: "content",     
        collapsible: true, 
    }); 
    $( ".sub_accardion" ).accordion({   
        active:'false',
        header: '.sub_link',    
        heightStyle: "content",     
        collapsible: true, 
    });    
});
</script>

Question

How can I add a class to set active on any panel? I tried active:'.active', but it doesn't work.

Upvotes: 1

Answers (1)

Code Maverick

Reputation: 20415

That is not the correct markup for the jQuery UI Accordion.

Per their documentation:

The underlying HTML markup is a series of headers (H3 tags) and content divs so the content is usable without JavaScript.

Since you are using UL tags, I think what you are looking for is the jQuery UI Menu.

Here is what I would do with your code:

HTML

<ul id="menu">
    <li> 
        <a class="open_link" href="#">1</a>
        <ul>
            <li> 
                <a class="sub_link" href="#">1.1</a>
                <ul>
                    <li><a href="#">1.1.1</a></li>
                    <li><a href="#">1.1.1</a></li>
                    <li><a href="#">1.1.1</a></li>
                </ul>
            </li>
            <li> 
                <a class="sub_link" href="#">1.2</a>
                <ul>
                    <li><a href="#">1.2.1</a></li>
                    <li><a href="#">1.2.1</a></li>
                    <li><a href="#">1.2.1</a></li>
                </ul>   
            </li>
        </ul>
    </li>
</ul>

JQUERY

$("#menu").menu();

CSS

.ui-menu { width: 100px; }

See working jsFiddle demo