隐藏显示不适用于多个div

Question

I am using the slideToggle method to hide/show a div. I am trying to replicate this action multiple times on a page but it only works on the 1st one. I figured out a way to have it work on each div but have to rename each div and add a new function in the javascript. What can I do to clean up my code as I am going to be using this through out the page and be creating new instances for each div does is not efficient.

<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

You can use classes instead of ids and use .next() method in callback function:

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

You need not to replicate this and rename <div> and create new function.

Take these steps:

1. Give same class to each div where you click to perform slideToggle(eg. flip).
2. Use selector $(this) to identify clicked element.
3. Use jquery .next() function to get the .next element.
4. Call .slideToggle() on that.
5. It's Done!!

See the code below:

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