Jquery change text on click to "show" or "hide"

Question

In this script, when the "Show" link is clicked, and the preview image is shown, the link text should change to "Hide". It only works after the 3rd click.

<span id='previewLinks'><br/><a id='showPreview' title='".get_option('my_theme')."'>Show</a>

$('#showPreview').click
(
    function(e) 
    {
    var myImage = $('#my_theme :selected').val();
    $('#largePreview').slideToggle(0, function() {
        $('#showPreview').text($(this).is(':visible') ? 'Hide' : 'Show');
    });
    $('#largePreview').attr('src', '<?php echo get_bloginfo('template_directory') ?>/styles/'+myImage+'/screenshot-help.jpg');
    }
);

Any reason you are using slideToggle with a duration of zero instead of hide()? — Jasper
– Jasper, Commented Jan 19, 2012 at 19:24

thecodeparadox · Accepted Answer · 2012-01-19 19:21:43Z

2

you can try this:

$('#showPreview').click(
    function(e) {
    var myImage = $('#my_theme :selected').val();
    $('#largePreview').slideToggle(0, function() {
        $('#showPreview').text($(this).is(':visible') ? 'Hide' : 'Show');
    });
    $('#largePreview').attr('src', '<?php echo get_bloginfo('template_directory') ?>/styles/'+myImage+'/screenshot-help.jpg');
    }).click();

answered Jan 19, 2012 at 19:21

thecodeparadox

87.2k22 gold badges143 silver badges164 bronze badges

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

1 Comment

thecodeparadox Over a year ago

@Scott B here i add an initial click()

mrtsherman · Accepted Answer · 2012-01-19 19:12:20Z

1

The reason it doesn't work initially is because #largePreview must have a display state opposite from what you are assuming. This change may fix it. Note the !

$('#showPreview').text(!$(this).is(':visible') ? 'Hide' : 'Show');

Or you may need to change the css for #largePreview.

answered Jan 19, 2012 at 19:12

mrtsherman

40k23 gold badges90 silver badges111 bronze badges

2 Comments

Jasper Over a year ago

That's kind of anti-intuitive isn't it? IF hidden THEN output "hide", IF visible Then output "show".

mrtsherman Over a year ago

@Jasper - yeah, I answered a question like this a few days ago and the user actually wanted it that way. Confused me, but I guess some people view it that way.

workdreamer · Accepted Answer · 2012-01-19 19:48:03Z

0

just figure out what you did wrong:

See example here.
1. Use

$(document).ready(function(){
});

2. <a href="javascript:;"> TEXT </a> will give you a right anchor
Hope it helps! Thanks to Jasper Too.

edited Jan 19, 2012 at 19:48

answered Jan 19, 2012 at 19:25

workdreamer

2,8861 gold badge37 silver badges37 bronze badges

1 Comment

Jasper Over a year ago

$(this).filter(":visible") always returns true so the text is always set to "Hide". Using .is() instead of .filter() will return true/false: $(this).is(":visible"). You can also check the length property of the jQuery object after filtering down to only visible elements: $(this).filter(":visible").length > 0. Here is an updated version of your jsfiddle: jsfiddle.net/Dgc3t/5

Collectives™ on Stack Overflow

Jquery change text on click to "show" or "hide"

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related