Question

I have a sliding div on my page which is using jQuery, I’d like to have multiple instances.

At the moment he jQuery script is…

$(document).ready(function(){

    $(".slidingDiv").hide();
    $(".show_hide").show();

$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});

});

and my link/div is…

<a href="#" class="show_hide" style="display: inline; ">test<span style="float:right;">+</span></a>

<div class="slidingDiv" style="display: none; ">
<div class="information-alert">test</div>

How would I go about creating multiple instances? Thanks

Answer 1

I would go by changing

$(".slidingDiv").slideToggle();

to

$(this).next().slideToggle();

meaning “slideToggle the element that goes right after the clicked element”.

See this JSFiddle