Nested Accordian

For some specific requiment, I had to build a nested accordian working with views, in this tutorial, I am not using views but just describing the html, js and css to describe how I acieved it.

<div id="accordion">
  <h2> Header One</h2>
  <div class="content accordion-content-shown-01">
    <p> +Title 001</p>
    <p>+Title 002</p>
  </div>
  <div class="content accordion-content accordion-content-01">
    <p>+Title 003</p>
  </div>
  <h4 class=" accordion-toggle accordion-toggle-01">Show More/Less 01</h4>

  <h2> Header Two</h2>
  <div class="content accordion-content-shown-02">
    <p>+Title 001A</p>
    <p>+Title 002A</p>
  </div>
  <div class="content accordion-content accordion-content-02 ">
    <p>+Title 003A</p>
  </div>
  <h4 class="accordion-toggle accordion-toggle-02">Show More/Less 02</h4>

  <h2> Header Three</h2>
  <div class="content accordion-content-shown-03">
    <p>+Title 001A</p>
    <p>+Title 002A</p>
  </div>
  <div class="content accordion-content accordion-content-03">
    <p>+Title 003B</p>
  </div>
  <h4 class="accordion-toggle accordion-toggle-03">Show More/Less 03</h4>

</div>

Here is the CSS.

.accordion-toggle {cursor: pointer;}
.accordion-content {display: none;}
.accordion-content.default {display: block;}

#accordion h2 {
  background: #0099ff none repeat scroll 0 0;
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  width: 200px;
}
#accordion .content p {
  background: #99ff99 none repeat scroll 0 0;
  padding-bottom: 2px;
  padding-left: 2px;
  padding-top: 2px;
  width: 200px;
}
.accordion-toggle {
  background: gray none repeat scroll 0 0;
  color: #fff;
  font-family: sans-serif;
  text-align: center;
  width: 100px;
}

Here is the JS file code.

(function ($) {
    $(document).ready(function () {

        $(".accordion-toggle").html('More »');

        $('#accordion').find('.accordion-toggle-01').click(function () {
            if ($('.accordion-content-01').is(':visible')) {
                $('.accordion-content-01').slideUp();
                
                $('.accordion-content-shown-02').slideDown();
                $('.accordion-content-shown-03').slideDown();
                
                $(".accordion-toggle").html('More «');
                $(".accordion-toggle-01").html('More »');

            } else {
                $('.accordion-content-01').slideDown();
                $('.accordion-content-shown-01').slideDown();
                
                $('.accordion-content-02').slideUp();
                $('.accordion-content-03').slideUp();
                $('.accordion-content-shown-02').slideUp();
                $('.accordion-content-shown-03').slideUp();
                
                $(".accordion-toggle").html('More «');
                $(".accordion-toggle-01").html('Less «');
            }
        });
        $('#accordion').find('.accordion-toggle-02').click(function () {
            if ($('.accordion-content-02').is(':visible')) {
                $('.accordion-content-02').slideUp();
                
                $('.accordion-content-shown-01').slideDown();
                $('.accordion-content-shown-03').slideDown();
                
                $(".accordion-toggle").html('More «');
                $(".accordion-toggle-02").html('More »');

            } else {
                $('.accordion-content-02').slideDown();
                $('.accordion-content-shown-02').slideDown();
                
                $('.accordion-content-01').slideUp();
                $('.accordion-content-03').slideUp();
                $('.accordion-content-shown-01').slideUp();
                $('.accordion-content-shown-03').slideUp();
                
                $(".accordion-toggle").html('More «');
                $(".accordion-toggle-02").html('Less «');
            }
        });
        $('#accordion').find('.accordion-toggle-03').click(function () {
            if ($('.accordion-content-03').is(':visible')) {
                $('.accordion-content-03').slideUp();
                
                $('.accordion-content-shown-01').slideDown();
                $('.accordion-content-shown-02').slideDown();
                
                $(".accordion-toggle").html('More «');
                $(".accordion-toggle-03").html('More »');

            } else {
                $('.accordion-content-03').slideDown();
                $('.accordion-content-shown-03').slideDown();
                
                $('.accordion-content-01').slideUp();
                $('.accordion-content-02').slideUp();
                $('.accordion-content-shown-01').slideUp();
                $('.accordion-content-shown-02').slideUp();
                
                $(".accordion-toggle").html('More «');
                $(".accordion-toggle-03").html('Less «');
            }
        });
        

    });

})(jQuery);

You can see the code working at JSFiddle.