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>
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>
You need not to replicate this and rename <div>
and create new function.
Take these steps:
$(this)
to identify clicked element. .next()
function to get the .next element. .slideToggle()
on that. 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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.