Могу ли я иметь несколько уровней гармоников на html странице

Question

У меня есть одна проблема, и я не смог найти правильное решение или визуализировать это решение.

У меня есть глубоко вложенный объект, который я хочу показать страницу с каждым ребенком на веб-сайте.

Структура как этот

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

Есть много полей, как, название, описание и т.д. во всех этих объектах.

Мне нужно показать все это на одной странице.

конструкция становится очень неаккуратно, если

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

тока я просто показать все в таблице тегов и для детей, я просто добавить некоторые отступа , как это

Теперь информация очень огромная и страница очень длинная, и клиент хочет, чтобы у вас были гармоники или что-то еще, чтобы каждый объект мог быть свернут или расширен.

Я не уверен, что мы можем сделать 3-4 уровней accordians или не

Я получил эту ссылку http://www.adipalaz.com/experiments/jquery/nested_accordion.html

Но не был уверен, что будет делать это

Answer 1

попробовать этот

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

CSS

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

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

     .section{ 
      display:none; 
     } 

сценарий

<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>