jquery - Javascript: Target only the parent item and leave siblings alone -

jquery - Javascript: Target only the parent item and leave siblings alone -

i'm new javascript , i've been wracking brains trying figure out guess should quite simple:

i'm using twitter bootstrap , have accordion of collapsible panels. i've added 2 divs panel heading within class 'panel_button': 1 containing text 'open' , 1 containing 'close'. want toggle displayed when clicked, don't know how target parent panel without siblings beingness triggered also. here code:

=====

html:

<div class="panel panel-default"> <div class="panel-heading clearfix closed" role="tab" id="headingone"> <h4 class="panel-title"><a data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="false" aria-controls="collapseone">panel heading 1</a></h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapseone" aria-expanded="false" aria-controls="collapseone" class="panel_button"> <div class="open_link_content">open</div> <div class="close_link_content" style="display:none;">close</div> </a> </div> <div id="collapseone" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingone"> <div class="panel-body">panel content 1</div> </div> </div> <div class="panel panel-default"> <div class="panel-heading clearfix closed" role="tab" id="headingtwo"> <h4 class="panel-title"><a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapsetwo">panel heading 2</a></h4> <a data-toggle="collapse" data-parent="#accordion" href="#collapsetwo" aria-expanded="false" aria-controls="collapseone" class="panel_button"> <div class="open_link_content">open</div> <div class="close_link_content" style="display:none;">close</span></div> </a> </div> <div id="collapsetwo" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingtwo"> <div class="panel-body">panel content 2</div> </div> </div>

====

i realise won't work it's far i've got:

<script> $(".panel-title , .panel_button").click(function(){ $(".close_link_content").toggle(); $(".open_link_content").toggle(); }); </script>

hopefully there simple solution out there. reading!

you can utilize bootstrap's show/hide events , show open or close links depending on them:

$('.panel').on('hide.bs.collapse', function (e) { $(this).find(".close_link_content").hide(); $(this).find(".open_link_content").show(); }) $('.panel').on('show.bs.collapse', function (e) { $(this).find(".close_link_content").show(); $(this).find(".open_link_content").hide(); })

here i've set example code

javascript jquery html css twitter-bootstrap