Скрыть/показать меню Javascript

Question

Я хочу создать меню, в котором вы нажмете заголовок, чтобы отобразить содержимое. Я хочу сделать это так же, как тот, в Inspect элемент Google, ниже:

мне удалось написать этот код:

<script> 
$("label").click(function() { 
    $("p").slideToggle("fast"); 


if ($((this).html).find('&#9654;')); 
{ 
    document.getElementById("lbl_name").innerHTML = '&#9660;' + document.getElementById("lbl_name").innerHTML.substring(1); 

} 

else if ($((this).html).find('&#9660;')); 
{ 
    document.getElementById("lbl_name").innerHTML = '&#9654;' + document.getElementById("lbl_name").innerHTML.substring(1); 
} 


}); 

& 96 ... является правильным и вниз стрелки

Но у меня есть проблемы с этим кодом: 1- Это не работает, после того, как он меняет стрелу в первый раз, измените его снова.

2- Я не хочу, чтобы функция работала с идентификатором элемента, потому что я хочу, чтобы она работала со многими текстами не только одна, поэтому я хочу, чтобы она, например, работала с вызывающей функцией, а не меняла все теги абзацев.

HTML-:

<label id="lbl_name">&#9654;Toggle</label> 
    <p> 
    This is the paragraph. 
    </p> 

Answer 1

HTML:

<label><span>&#9654;</span>Click Me</label> 
<p class="p">this is a sample text..</p> 

CSS:

  <style> 
      .p { 
       display: none; 
      }     
     </style> 

JavaScript: // если у вас есть JQuery раньше, чем 1.9, вы можете использовать toggle

 <script> 
      $(function(){ 
       $("label").toggle(function(){ 
        $(this).find("span").html('&#9660;'); 
        $(this).next("p").slideDown(500); 
       },function(){      
        $(this).find("span").html('&#9654;'); 
        $(this).next("p").slideUp(500); 
       }); 
      });    
     </script> 

Answer 2

Ive сделал нечто похожее ... попытайтесь понять, что делать внутри события. Для того, чтобы не использовать идентификатор, попробуйте использовать класс Intead или просто функция .next() JQuery, как я сделал:

$('p > .arrow').on('click', function(e) { 
    var $el = $(e.target); 
    if($el.hasClass('arrow-right')) { // so this is hide! show it 
    $el.next('p').slideDown('fast'); 
    $el.removeClass('arrow-right'); 
    $el.addClass('arrow-down'); 
    } 
    else { // is visible, hide it 
    $el.next('p').slideUp('fast'); 
    $el.addClass('arrow-right'); 
    $el.removeClass('arrow-down'); 
    } 
}); 

Вы HTML должны быть что-то вроде:

<p> 
    <span class="arrow arrow-right"></span> 
    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod temp 
    <p><span class="arrow arrow-right"></span>Lorem ipsum dolor sit amet, consect</p> 
</p>