jquery slidetoggle where show/hide links are different -

here code i'm using (found elsewhere on site) pretty straight-forward slidetoggle.

<script>     $(document).ready(function () {         $(".slidingdiv").hide();          $('.show_hide').click(function (e) {             $(".slidingdiv").slidetoggle("fast");             e.preventdefault();         });     }); </script> 

html:

<div class="section-hold">     <h4>section</h4>     <p><a href="#" class="show_hide">find out more >></a></p>        </div>  <div class="slidingdiv">                 <h4>my content.</p> </div> 

what though when click show slidingdiv, "find out more" link disappears , toggle hide slidingdiv content different link, contained within div itself. html become this:

<div class="section-hold">     <h4>section</h4>     <p><a href="#" class="show">find out more >></a></p>         </div>  <div class="slidingdiv">                 <h4>my content.</p>     <p><a href="#" class="hide">close section</a></p> </div> 

any thoughts on how accomplish that? note there couple sections on page ideally code reusable several times on page.

i'm using jquery 1.11.0 if makes difference.

thanks much.

this may you're looking for. i've coded should reusable on same page.

firstly (to re-usability), wrap html in <div> have:

<div class="slidercontainer">     <div class="section-hold">         <h4>section</h4>         <p><a href="#" class="show">find out more >></a></p>             </div>      <div class="slidingdiv">                     <h4>my content.</p>         <p><a href="#" class="hide">close section</a></p>     </div> </div> 

then need function show .slidingdiv while hiding .show link have clicked on.

$('.show').click(function (e) {     var slider = $(this).closest('.slidercontainer').find('.slidingdiv');     slider.show('slide');     $(this).hide();     e.preventdefault(); }); 

this uses <div> added in order find related .slidingdiv can use safely elsewhere on page.

you need function hide .slidingdiv , show .show link again. this:

$('.hide').click(function (e) {     var slider = $(this).closest('.slidingdiv');     slider.hide('slide');     $('.show').show();     e.preventdefault(); }); 

and should it. here jsfiddle of working code: http://jsfiddle.net/d9uel/

hope helps.