jQuery Toggle HTML On Click

Question

When i click on the button the HTML changes, But when i click again, the slide toggle fires up but the I want to put back the html as Show Me.

<div id="show">Show Me</div>
<div id="visible">Hello, My name is John.</div>

$(document).ready(function(){
    $("#show").click(function(){
        $('#visible').slideToggle();
        $('#show').html('Hide me');
    });
})

http://jsfiddle.net/u2p48/13/

Any idea how is that done?

Thank you

Adil · Accepted Answer · 2013-03-01 09:13:26Z

24

You can use conditional operator ? : to switch between texts.

Live Demo

$(document).ready(function(){
    $("#show").click(function(){
        $('#visible').slideToggle();            
        $('#show').html($('#show').text() == 'Hide me' ? 'Show Me' : 'Hide me');
    });
})

answered Mar 1, 2013 at 9:13

Adil

148k25 gold badges217 silver badges207 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Mersal Over a year ago

Well that was pretty quick :) That did the trick :) Thank you so much :)

David Hedlund · Accepted Answer · 2013-03-01 09:13:48Z

2

You need to pass 'Show me' or 'Hide me' to .html, depending on whether you're showing or hiding. One way would be to check the visibility of #visible before sliding:

var on = $('#visible').is(':visible');

and consequently:

$('#show').html(on ? 'Show me' : 'Hide me');

Demo

answered Mar 1, 2013 at 9:13

David Hedlund

130k33 gold badges205 silver badges223 bronze badges

Comments

Zoltan.Tamasi · Accepted Answer · 2013-03-01 09:18:23Z

0

Look at this solution too:

$("#show").click(function(){
    if ($('#visible').hasClass('visible')) {
        $('#visible').slideDown().removeClass('visible');
        $('#show').html('Hide me');
    } else {
        $('#visible').slideUp().addClass('visible');
        $('#show').html('Show Me');
    }    
});

http://jsfiddle.net/xkyf2/1/

answered Mar 1, 2013 at 9:18

Zoltan.Tamasi

1,38913 silver badges27 bronze badges

2 Comments

John Mersal Over a year ago

I actually did that the 1st time, but i didnt wanna add class and remove class. i wanned the best way to switch between html text because i dont have experience with it, but now i understand how it works :)

Zoltan.Tamasi Over a year ago

I prefer using slideUp and slideDown instead of slideToggle, because this way you can be sure that it slides down when the text just became 'hide me' and vice versa. Slidetoggle is not so clear, because just by looking at the code, you can't tell what will happen, it depends on the actual state, it can be confusing.

ardev · Accepted Answer · 2016-03-10 18:51:07Z

0

use a data attribute in your html

	$('button').on('click', function(){
		var that = $('button');
		if(that.text() == that.data("text-swap")){
			that.text(that.data("text-original"));
		} else {
			that.data("text-original", that.text());
		that.text(that.data("text-swap"));
		}	
	});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<button data-text-swap="Replace Text" data-text-original="Original Text">Original Text</button>

answered Mar 10, 2016 at 18:51

ardev

6632 gold badges6 silver badges19 bronze badges

Collectives™ on Stack Overflow

jQuery Toggle HTML On Click

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related