jQuery toggle on different elements without creating a new function for each id element -
is there way of making jquery toggle work on different elements on same page without need of having 1 function each of id elements.
this have far.
jquery:
//toggle--> $('#clickme_info_1').click(function() { $( '.toggle_info_1' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" ) }); $('#clickme_info_2').click(function() { $( '.toggle_info_2' ).animate({ "height": "toggle", "opacity": "toggle" }, "slow" ) });
html:
<div id="testslider04" class="flexslider"> <ul class="slides"> <li> <div id="clickme_info_1">+</div> <div class="toggle_info_1">info 1 shows</div> slide 1 </li> <li> <div id="clickme_info_2">+</div> <div class="toggle_info_2">info 2 shows</div> slide 2 </li> </ul> </div>
you can see working in here http://jsfiddle.net/raulmv/5fspj/
add class + element , on animate add class click function , on animate change toggle $(this).next()
$('.yourclassname').click(function() { $( ).next().animate({ "height": "toggle", "opacity": "toggle" }, "slow" ) });
here working example: http://jsfiddle.net/5fspj/3/
Comments
Post a Comment