How to change the text for a link after being pressed
I'm trying to add a very simple show/hide link to my gallery. The code I have so far will toggle the visibility of the div correctly when the link is pressed, but I want that text to change to reflect what would happen when pressed again (so it'll display 'show' when the div is hidden, and 'hide' when the div is showing).
jQuery:
- $('.toggleLandscapes').click(function(){
- $("#landscape_thumbs").slideToggle();
- $(".toggleLandscapes").html((".toggleLandscapes:contains('Hide')") ? "Show" : "Hide");
The HTML:
- <div id="landscape_photos">
- <header><h4>Landscapes</h4><span class="toggle_view" id="toggle_landscapes"><a href="#" class="toggleView toggleLandscapes">Hide</a></span></header>
- <div class="clear_float"></div>
- <div class="gallery_accent_stroke"></div>
- <div class="thumbs" id="landscape_thumbs">
- <div class="photo_thumb "id="landscape_photo_1"><img class="photo_thumb" src="images/Lighthouse.jpg" alt="Landscape Photo 1"></div>
- <div class="photo_thumb "id="landscape_photo_2"><img class="photo_thumb" src="images/Desert.jpg" alt="Landscape Photo 2"></div>
- <div class="clear_float"></div>
- </div>
- </div>
The code I have at the moment will successfully change the text from hide to show, but it won't ever change back to hide unless I refresh the page. Am I missing something?
Thanks