How can I create multiple instances of show / hide div in jquery?
I have the following code
$(document).ready(function() {
$('a#slick-toggle').click(function() {
$('#slickbox0').toggle(400);
return false;
});
});
<a id="slick-toggle" href="#">Show/Hide</a>
<div id="slickbox" style="display: none;">
hidden content here
</div>
The problem is, if there is more than one instance in the html part of this on the page, it won't work. I am not very good at JS. The div id which i have to make unique .... but how do i make each link to toggle the corresponding field?
You shouldn't be repeating IDs in your HTML. But you want to use the same functionality in jQuery, so add a generic class name so you can apply this functionality to all of these anchors.
Also, since you don't know if the HTML structure can be predictable, you will need to draw a link between the anchor element and the div element. Notice the data id attribute below:
<a id="someID" class="slick-toggle" data-id="334" href="#">Show/Hide</a>
<div id="someOtherID" class="slickbox" data-id="334" style="display: none;">
hidden content here
</div>
This "334" can be anything. It will be something unique that you can decide when you output the content.
Now your code can target each .slick-toggle class and toggle the associated div.
$(document).ready(function() {
$('a.slick-toggle').click(function() {
var dataID = $(this).attr("data-id");
$("div[data-id=" + dataID + "].slickbox").toggle(400);
return false;
});
});
source to share
You can establish a naming convention between your link and the corresponding div.
<a id="toggle-box1" class="toggler">click/show</a>
<div id="box1">hide me</div>
And then install them generically:
$(".toggler").click(function() {
var targetId = $(this).attr("id").replace("toggle-", "");
$("#" + targetId).toggle(400);
});
source to share
Not tested, but this uses .each and a context selector:
<div class="group">
<a class="toggle" href="#">toggle</a>
<div class="content-hidden">content!</div>
</div>
<div class="group">
<a class="toggle" href="#">toggle</a>
<div class="content-hidden">content!</div>
</div>
<div class="group">
<a class="toggle" href="#">toggle</a>
<div class="content-hidden">content!</div>
</div>
<style>
div.content-hidden { display:none; }
</style>
<script>
$('.group').each(function() {
var toggle = $('.toggle', this), content = $('.content-hidden', this);
toggle.click(function(e) {
e.preventDefault();
$(content).toggle();
});
});
</script>
source to share
I asked a very similar question just a few days ago since I had the same problem. It might help you! Lots of code examples are provided.
source to share
You need to bind the show / hide link to the corresponding field. I would suggest using something like this:
<a class="slick-toggle" href="#slickbox1">Show slickbox 1</a>
<div class="slick-box" id="slickbox1">
Hidden content here
</div>
<a class="slick-toggle" href="#slickbox2">Show slickbox 2</a>
<div class="slick-box" id="slickbox2">
Hidden content here
</div>
<a class="slick-toggle" href="#slickbox3">Show slickbox 3</a>
<div class="slick-box" id="slickbox3">
Hidden content here
</div>
<script type="text/javascript">
jQuery(function(){
$('a.slick-toggle').click(function(){
$($(this).attr('href')).toggle(400);
});
});
</script>
This way, each link attribute href
binds it to the corresponding div to switch.
source to share