sizemattic sizemattic - 7 months ago 23
HTML Question

hide show not working on multiple divs

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

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>