How to use click function as toggle

Question

I'm using jQuery 1.3.2 (can't update because of drupal6)

jQuery

$(document).ready(function() {
  var textcontent = $('.trig').text();

  $('.trig').click(function() {
    if (textcontent == 'Open') {
      $(this).text('Close').addClass('not-trig');
    } else if (textcontent == 'Close') {
      $(this).text('Open');
    }
  })
});

HTML

<div class="trig">Open</div>

What i'm trying to do:

When you click on div with class .trig it should change the text "OPEN" to "close" and vice versa when you click again. But it seems like click works only once, when i click first time it changes the text from "Open" to "close" but when i click again - nothing happens...

Answer 1

You need to re-fetch the value of var textcontent = $('.trig').text(); in every click

$(document).ready(function() {
    $('.trig').click(function() {
        var textcontent = $('.trig').text();
        if (textcontent == 'Open') {
            $(this).text('Close').addClass('not-trig');
        } else if (textcontent == 'Close') {
            $(this).text('Open');
        }
    })
});

Demo: Fiddle

Another clean implementation might be to look for the class not-trig, because it looks like you need the class only if it is close. ie if the text is Open then not-trig might have to be removed

$(document).ready(function() {
    $('.trig').click(function() {
        var $this = $(this);

        if($this.hasClass('not-trig')){
            $this.text('Open').removeClass('not-trig');
        } else {
            $this.text('Close').addClass('not-trig');
        }
    })
});

Demo: Fiddle