jquery - change text in one button -

i have several buttons same text inside - each button opens containing div when clicked. problem is, cant make text change on single button clicked - when click button text changes simultaneously on buttons.

does know how change text in button clicked?

this code have far - jquery not working correctly:

html

<div class="btn"> show </div>         <div class="pre_hide" style="background: blue">                       <h5>box 1</h5>         </div> <!-- end of pre_hide -->        <br>  <div class="btn"> show </div>         <div class="pre_hide" style="background: blue">                       <h5>box 2</h5>         </div> <!-- end of pre_hide -->        <br>  <div class="btn"> show </div>         <div class="pre_hide" style="background: blue">                       <h5>box 3</h5>         </div> <!-- end of pre_hide --> 

jquery

$('.btn').click(function(){     if(event.target === this) { // not working !!         if ($(this).text() == "hide") {               $('.btn').text("show");             $(this).next('.pre_hide').css({'display': 'none'});         }         else {               $('.btn').text("hide");             $(this).next('.pre_hide').css({'display': 'block'});         }     }  }); 

this should work:

$('.btn').click(function(){     if ($(this).text() == "hide") {           $(this).text("show");         $(this).next('.pre_hide').css({'display': 'none'});     }        else {           $(this).text("hide");         $(this).next('.pre_hide').css({'display': 'block'});     }  });