hide show not working on multiple divs

Question

Я использую метод slideToggle, чтобы скрыть/показать div. Я пытаюсь повторить это действие несколько раз на странице, но он работает только с 1-го. Я выяснил, как он работает над каждым div, но нужно переименовать каждый div и добавить новую функцию в javascript. Что я могу сделать, чтобы очистить мой код, поскольку я собираюсь использовать его на странице и создавать новые экземпляры для каждого div, неэффективен.

<script> 
    $(document).ready(function() { 
    $("#flip").click(function() { 
     $("#panel").slideToggle("slow"); 
    }); 
    $("#flip2").click(function() { 
     $("#panel2").slideToggle("slow"); 
    }); 
    $("#flip3").click(function() { 
     $("#panel3").slideToggle("slow"); 
    }); 
    }); 

</script> 

<p class="button-label">Active</p> 
<button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
<div id="flip">Click to view HTML</div> 
<div id="panel" style="display:none"> 
    <textarea rows="3" cols="50"> 
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
    </textarea> 
</div> 

<p class="button-label">Disabled</p> 
<button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
<div id="flip2">Click to view HTML</div> 
<div id="panel2" style="display:none"> 
    <textarea rows="3" cols="50"> 
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
    </textarea> 
</div> 

<p class="button-label">Select Options</p> 
<button type="button" class="btn select-options"><span>select options</span></button> 
<div id="flip3">Click to view HTML</div> 
<div id="panel3" style="display:none"> 
    <textarea rows="3" cols="50"> 
    <button type="button" class="btn select-options"><span>select options</span></button> 
    </textarea> 
</div> 

Answer 1

Вы можете использовать классы вместо идентификаторов и использовать .next() метод в функции обратного вызова:

$(document).ready(function(){ 
 
    $(".flip").click(function(){ 
 
     $(this).next('.panel').slideToggle("slow"); 
 
    }); 
 

 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<p class="button-label">Active</p> 
 
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
 
    <div class="flip">Click to view HTML</div> 
 
    <div class="panel" style="display:none"> 
 
      <textarea rows="3" cols="50"><button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
 
      </textarea> 
 
    </div> 
 

 
    <p class="button-label">Disabled</p> 
 
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
 
    <div class="flip">Click to view HTML</div> 
 
    <div class="panel" style="display:none"> 
 
      <textarea rows="3" cols="50"><button type="button" class="btn a-cart disabled"><span>ADD TO CART</span> 
 
      </button> 
 
      </textarea> 
 
    </div> 
 

 
    <p class="button-label">Select Options</p> 
 
    <button type="button" class="btn select-options"><span>select options</span></button> 
 
    <div class="flip">Click to view HTML</div> 
 
    <div class="panel" style="display:none"> 
 
      <textarea rows="3" cols="50"><button type="button" class="btn select-options"><span>select options</span> 
 
      </button> 
 
      </textarea> 
 
    </div>

Answer 2

Вам не нужно повторить это и переименовать <div> и создать новую функцию.

Возьмите эти шаги:

1. Дайте же класс каждому DIV, где вы щелкнули для выполнения slideToggle (например, переворачивать.).
2. Использовать селектор $(this) для идентификации элемента с щелчком.
3. Используйте функцию jquery .next(), чтобы получить элемент .next.
4. Позвонить .slideToggle() на этом.
5. Это сделано!

Смотрите код ниже:

<script> 
     $(document).ready(function() { 
      $(".flip").click(function() { 
       $(this).next().slideToggle("slow"); 
      }); 
     }); 

    </script> 

    <p class="button-label">Active</p> 
    <button type="button" class="btn a-cart"><span>ADD TO CART</span></button> 
    <div class="flip">Click to view HTML</div> 
    <div id="panel" style="display:none"> 
     <textarea rows="3" cols="50"> 
      <button type="button" class="btn a-cart"><span>ADD TO CART</span> </button> 
     </textarea> 
    </div> 

    <p class="button-label">Disabled</p> 
    <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
    <div class="flip">Click to view HTML</div> 
    <div id="panel2" style="display:none"> 
     <textarea rows="3" cols="50"> 
     <button type="button" class="btn a-cart disabled"><span>ADD TO CART</span></button> 
     </textarea> 
    </div> 

    <p class="button-label">Select Options</p> 
     <button type="button" class="btn select-options"><span>select options</span></button> 
    <div class="flip">Click to view HTML</div> 
    <div id="panel3" style="display:none"> 
     <textarea rows="3" cols="50"> 
      <button type="button" class="btn select-options"><span>select options</span></button> 
     </textarea> 
    </div>