Div раскрывающееся меню показать/скрыть onclick jquery

Question

Я пытаюсь реализовать раскрывающееся меню div.

JQuery здесь:

<script> 
    $(document).ready(function() { 
     $('.desplegar').click(function() { 
      $(this).next("div.desplegar_fills").show().siblings("div.desplegar_fills").hide();    
     }); 
    }); 
</script> 

Я знаю, что JQuery будет работать только, чтобы показать уровень Subindex, но я даже не могу заставить его работать.

HTML здесь:

<div class="desplegar"> 
     <p>Index 1</p> 
     <div class="desplegar_fills"> 
      <p>Subindex 1</p> 
      <div class="desplegar_links"> 
       <a href="#">Enllaç 1</a> 
       <a href="#">Enllaç 2</a> 
       <a href="#">Enllaç 3</a> 
      </div> 
     </div> 
    </div> 
    <div class="desplegar"> 
     <p>Index 2</p> 
     <div class="desplegar_fills"> 
      <p>Subindex 2</p>  
      <div class="desplegar_links"> 
       <a href="#">Enllaç 1</a> 
       <a href="#">Enllaç 2</a> 
       <a href="#">Enllaç 3</a> 
      </div> 
     </div>  
    </div> 
    <div class="desplegar"> 
     <p>Index 3</p> 
     <div class="desplegar_fills"> 
      <p>Subindex 3</p>  
      <div class="desplegar_links"> 
       <a href="#">Enllaç 1</a> 
       <a href="#">Enllaç 2</a> 
       <a href="#">Enllaç 3</a> 
      </div> 
     </div>  
    </div> 

Он должен выглядеть следующим образом:

Так что, если я нажимаю на индекс 1 это показывает Subindex 1 и если я нажимаю на субиндекс 1 это показывает ссылки. Дело в том, что если я нажму на Index 2 или Index 3, индекс 1 должен закрыть и просто отобразить Subindex 2 или Subindex 3 (в зависимости от того, какой щелчок). Любые предложения? Спасибо всем!

Answer 1

Пожалуйста, найдите ответ here.

В принципе этот скрипт должен делать эту работу:

$(document).ready(function() { 
    $('.desplegar_fills').hide(0); 
    $('.desplegar_links').hide(0); 
    $('.desplegar').click(function() { 
     $('.desplegar_fills').hide(0); 
     $('.desplegar_links').hide(0); 
     $(this).find(".desplegar_fills").show(0); 
    }); 
    $('.desplegar_fills').click(function(e){ 
     $('.desplegar_links').hide(0); 
     $(this).find(".desplegar_links").show(0); 
     e.stopPropagation(); 
    }) 
});