Can I have multiple levels of accordions in html page

Question

I have one issue and I have been not able to find proper solution or visualize this solution.

I have the deep nested object which I have to show the detail page with every child on website.

The structure is like this

1. Organisation
2. -----------------> Centres
3. -------------------------------schools
4. -----------------------------------------Kids Branch
5. -----------------------------------------Senior Branch

There are many fields like , name, description etc in all those objects.

I need to show all that stuff in one page.

The design becomes very messy if

i have 3 centres , 
then each center has 3 schools and 
each school has 2 bracnches

Current I just show all in table tag and for children I just add some indent LIKE THIS

Now the information is very huge and page is very long and client want o have accordions or anything else so that every object can be collapsed or expanded.

I am not sure can we do 3-4 levels of accordions or not

I got this link http://www.adipalaz.com/experiments/jquery/nested_accordion.html

But was not sure if that will do it

Answer 1

try this

JsFiddle: http://jsfiddle.net/ZGTJb/

CSS

.head {
            background: #eee;
            cursor: pointer;
        }

        .section .head, .section .section {
            margin-left: 20px;
        }

        .section{
            display:none;   
        }

script

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
        $(document).ready(function () {
            $('#accordion .head').click(function () {
                var head = $(this);

                // remove any active head
                head.siblings('.head').removeClass('active');

                var section = head.next('.section');
                //remove .section to exclude from hide all
                section.removeClass('section');

                //hide sibling sections
                head.siblings('.section').hide();

                // set .section class back
                section.addClass('section');

                if( !section.css(':visible')) {
                    // set as active and show section
                    head.addClass('active');
                    section.fadeIn(500);
                };

            });
        });
    </script>

HTML

<div id="accordion">
        <h3 class="head">
            section 1</h3>
        <div class="section">
            <p>
                section 1
            </p>
            <h3 class="head">
                section 1.1</h3>
            <div class="section">
                <p>
                    section 1.1
                </p>
            </div>
            <h3 class="head">
                section 1.2</h3>
            <div class="section">
                <p>
                    section 1.2
                </p>

                <h3 class="head">
                    section 1.2.1</h3>
                <div class="section">
                    <p>
                        section 1.2.1
                    </p>
                </div>

                <h3 class="head">
                    section 1.2.2</h3>
                <div class="section">
                    <p>
                        section 1.2.2
                    </p>
                </div>

            </div>
        </div>
        <h3 class="head">
            section 2</h3>
        <div class="section">
            <p>
                section 2
            </p>
        </div>
    </div>