Jquery Toggle HTML

If you take a look at this page

http://psdesignzone.com/jquery/d6tftoggle.html

I’m trying to get the <a> Tag to toggle between show and hide, and as you can see it works the first time using the $(this).html(‘Show’) command but I need it to toggle back to the original HTML when Show is clicked, (Change show to hide)

Thanks

$('a.hideBox1').click(function() {
	$('a.hideBox1').toggle();
	$('#box').slideToggle();
});

http://docs.jquery.com/Effects

I don’t think you understand what I’m trying to do, I already have the box hiding, I’m trying to change the Text from ‘hide’ to ‘show’ and back again.

alright got it working looks like you can over write the Toggle Method like this

$(a).toggle(function() {
$(this).html(‘Show’);
}, function() {
$(this).html(‘Hide’);
});

Not completely sure why it works but it works.

My example:
http://screencast.com/t/CwDfN1zTL

Toggles the hide/show text and as well toggles the box at the same time.

Glad you have it working though!

Oh ok, I see what you were doing now, that would work as well, thanks for the help

$(function() {
	var isClicked = false;
	
	$('a').click(function() {
		if (isClicked == false) {
			$(this).html('Hide');
			$('#box').slideUp();
			isClicked = true;
		}
		else {
			$(this).html('Show');
			$('#box').slideDown();
			isClicked = false;
		}
	});
});

would work as well… Kinda bulky though!

Just out of curiosity what if you wanted to change the HTML of the entire A tag.

i.e.

change <a id=“whatever”>Text</a>
to
<a id=“newid”>Text</a>

Is that possible?

It is possible :slight_smile: You would have to change the attribute id… Remove the original one and add the new one…

http://docs.jquery.com/Attributes

Ok, makes sense, thanks for your help

<a id="new" href="#">Text</a>
$('a#new').click(function() {
	$('a#new').removeAttr('id').attr('id','won');
});

Here is a gift you will soon learn to love :lol: