<button class="btn hide_show">Don't show text</button>
$(".hide_show").toggle(function () {
$(this).text("Show text");
}, function () {
$(this).text("Don't show text");
});
I don't know exactly why this code doesn't work. The idea is toggle the text of the button
The toggle function you have executes on DOM ready and hides the button and there is no way to show it again. You probably need to change the text of click.
$(".hide_show").click(function () {
$(this).text( $(this).text() == "Show text" ? "Don't show text" :"Show text");
});
jQuery originally had two .toggle() functions. One toggles visibility, and the other sets up a click handler that toggles between multiple handlers. Which function was used depended on what arguments were passed in. It seems to be the latter that you are trying to use, but it was deprecated in v1.8 and removed in v1.9.
Fortunately it's pretty easy to implement something like the removed .toggle():
var text = ["Show text", "Don't show text"],
i = 0;
$(".hide_show").click(function () {
$(this).text(text[i]);
i = (i + 1) % text.length;
});
Demo: http://jsfiddle.net/x83qg/12/
Note that (like the old .toggle() function that allowed more than two handlers) the code I've shown will cycle through all items in the array, so you're not restricted to just switching back and forth between only two items.
Try:
var txt = $(".hide_show").text().toLowerCase();
if(txt == "show text"){
$(".hide_show").text("Don't show text");
}
else{
$(".hide_show").text("Show text");
}
.toggle()isn't an event listener but a function. You should replace.toggle()by.click(). Then, make a test on the displayed text. If text, hide it, else, display it..toggle()method.toggle! He was unable to see because toggle was hiding it.