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/