[jQuery] Change text on toggle effect
Hi guys,
I've written the below function to change the text on toggle, problem
is i want this though i don't want this to be controlled by the JS.
currently have 2 spans..
<span class="view">View details</span>
<span class="hide">Hide details</span>
The 'view' class is visible while the 'hide' class is hidden
initially.
I would like to show the 'hide' class on toggle and hide the 'view'
class.
Is that achievable?
Here's some code for reference.
Cheers
C.
/////////////////// js ////////////////////////
var showText = "View details";
var hideText = "Hide details";
$(".hide").hide();
$("#award_cat .view").click(function() {
if($(this).text()==showText) {
$(this).text(hideText);
}
else {
$(this).text(showText);
}
$(this).prev(".more").toggle("slow");
return false;
});
/////////////////// html ////////////////////////
<div id="award_cat">
<div class="more">
this is blah blah hidden text
</div>
<span class="view">View details</span><span class="hide">Hide details</
span>
<div class="more">
this is blah blah hidden text
</div>
<span class="view">View details</span><span class="hide">Hide details</
span>
</div>