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');
    }
);

Answer 1

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();