Question

I’ve tried this with .toggle() and the longer form below. If I take out the lines for .replaceWith, it works fine to show and hide #the-form, but with it in… #the-form unhides and #show-form changes properly, but neither work for the next clicks.

Can anyone see what I’m doing wrong?

<script type="text/javascript">
    jQuery('#show-form').click(
        function() {
            if (jQuery("#the-form").is(":hidden")) {
                jQuery('#the-form').show('fast');
                jQuery('#show-form').replaceWith('<div id="show-form">Hide Form</div>');
            } else {
                jQuery('#the-form').hide('fast');
                jQuery('#show-form').replaceWith('<div id="show-form">Show Form</div>');
            }
    });
</script>

UPDATE: Removed backslashes from quotes.

UPDATE 2 Working version:

<script type="text/javascript">
jQuery('#show-form').live('click',
    function() {
        if (jQuery("#the-form").is(":hidden")) {
            jQuery('#show-form').html('Hide Form');
            jQuery('#the-form').show('fast');
        } else {
            jQuery('#show-form').html('Show Form');
            jQuery('#the-form').hide('fast');
        }
});

Thanks for the help!

Answer 1

Moving to answer:

Why not just use the html function? jQuery(‘#show-form’).html(‘Hide Form’), and vice versa