How to Create Multilevel jquery accordion menu using jQuery?

Question

I want to create multilevel accordion Navigation using jQuery , I tried using this script but it not allow the multi-level. Please view the Image what exactly I am looking for,

http://www.i-marco.nl/weblog/jquery-accordion-menu/#

Thanks

Solution

First markup your items like so. You'll want to mark any submenus with the "accordion" class.

<ul class="accordion">
  <li><a class="head" href="#">Item 1</a>
      <ul class="accordion">
      <li><a href="#">Item 1 - 1 </a></li>
      <li><a href="#">Item 1 - 2</a></li>
      <li>
        <a href="#">Item 1 - 3</a>
        <ul class="accordion">
          <li><a href="#">Item 1 - 3 - 1</a></li>
          <li><a href="#">Item 1 - 3 - 1 </a></li>
          <li><a href="#">Item 1 - 3 - 1</a></li>
        </ul>
      </li>
    </ul>
  </li>
  <li><a href="#">Item 2</a></li>
  <li>
    <a href="#">Item 3</a>
    <ul class="accordion">
      <li><a href="#">Item 3 - 1 </a></li>
      <li><a href="#">Item 3 - 2</a></li>
      <li><a href="#">Item 3 - 2</a></li>
    </ul>
  </li>
</ul>

After that just use jQuery UI's accordion plugin (Don't forget to include the jQuery core file and jQuery UI file.

<script type="text/javascript">
    $(function() {
        $(".accordion").accordion();
    });
</script>

http://jqueryui.com/demos/accordion/

Use CSS to style as required. Of course, the structures and the class names can be changed as preferred. This is just the easiest solution