Toggle functionality Issue

Question

I have DIV Content and HIDE/SHOW hyper link. The functionality is not happening as expected. Initially the div content is visible with hide link, once user click HIDE link the DIV content get close and link value change into SHOW. once user click back it should show DIV content and change the SHOW link to HIDE

<div id="collapse1">
        content
</div>

<a href="#collapse1" class="nav-toggle">Hide</a>


$('.nav-toggle').click(function()
          {
            var txtValue = $('.nav-toggle').text();
            $('#collapse1').toggle('fast');
            if(txtValue = 'Hide'){$('.nav-toggle').html('Show');}
            else if(txtValue = 'show'){
            $('.nav-toggle').text('hide');}

          });

Demo code: http://jsfiddle.net/dkdRt/5/

Answer 1

Change this line

else if (txtValue = 'show') 

to

else if (txtValue = 'Show') // Case sensitive

Answer 2

The issue is the condition (case sensitive and equal signs), but a simpler solution would be to use text() with a callback function :

$('.nav-toggle').on('click', function(e) {
    e.preventDefault();
    $('#collapse1').toggle('fast');
    $('.nav-toggle').text(function(_,txt) {
        return txt == 'Hide' ? 'Show' : 'Hide';
    });
});

FIDDLE

Answer 3

DEMO

If you pay attention to the below code, there were basically two issues

1. While doing comparison, case was not being matched.

if (txtValue = 'Show') // originally was show and it should be Show

2. The Conditional Operator was missing and instead Assignment Operator was used.

if (txtValue = 'Hide') { $('.nav-toggle').html('Show'); }

It should be like below..

if (txtValue === 'Hide') { $('.nav-toggle').html('Show'); }

JQuery

$('.nav-toggle').click(function (e) {
    e.preventDefault();
    var txtValue = $('.nav-toggle').text();
    $('#collapse1').toggle('fast');
    if (txtValue === 'Hide') { $('.nav-toggle').html('Show'); }
    else if (txtValue === 'Show') {
        $('.nav-toggle').text('Hide');
    }
});

Answer 4

= is assignment operator.

== and === are comparison operators.

DEMO

Difference between == and ===

$('.nav-toggle').click(function () {
    var txtValue = $('.nav-toggle').text();
    $('#collapse1').toggle('fast');
    if (txtValue === 'Hide') {
        $('.nav-toggle').html('Show');
    } else if (txtValue === 'Show') { // not 'show', values are case sensitive
        $('.nav-toggle').text('Hide');
    }
});