html - Show More / Show Less JavaScript not working properly -

i trying make div tag appear when select "show more" link. far, div appears when page loads, don't want. when select "show" link, div disappears. need opposite happen, , make div disappear when select link again.

here's html:

<div class="videotext" align="left"> <a href=""><span> <strong> credits </strong> </span></a>  <br> directed by: <a href="#"> link 1 </a> <br> edited   by: <a href="#"> link 2 </a> <br>  <a href="#" id="hideshow">show</a>  <div id="message">     credit: <a href="#"> link 3 </a> <br>     credit: <a href="#"> link 4 </a>  <br>  </div> </div> 

here's .js file:

$('#hideshow') .click(function() {     $('#hideshow') .text('hide');     $('#message') .show();     }, function() {     $('#hideshow').text('show');     $('#message') .hide();  }); 

i feel have of code in wrong place.

here page trying code work: http://www.kingdombrand.com/film/alek/films/testfilm

try js:

$('#hideshow').click(function(event) {    event.preventdefault()     if($('#hideshow').text() == 'show'){       $('#hideshow').text('hide');       $('#message').show();    }    else{       $('#hideshow').text('show');       $('#message').hide();    } }); 

and css:

#message {    display: none; }