Simplifying multiple click events into something more extendable I have the following code which changes the text in a certain element on click depending on the text value present in the element at the time the event is fired.

http://jsfiddle.net/TNDhL/

$('#left').on('click', function (){
if ($("#textContainer:contains('something')").length) {
    $('#textContainer').text('third text replacement');
    $('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
    $('#textContainer').text('now the next item');
    $('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
    $('#textContainer').text('new text here');
    $('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
    $('#textContainer').text('something');
    $('.elsewhere').text('text here');
}
});

$('#right').on('click', function (){
if ($("#textContainer:contains('something')").length) {
    $('#textContainer').text('new text here');
    $('.elsewhere').text('something else here');
}
else if ($("#textContainer:contains('new text here')").length) {
    $('#textContainer').text('now the next item');
    $('.elsewhere').text('something new here');
}
else if ($("#textContainer:contains('now the next item')").length) {
    $('#textContainer').text('third text replacement');
    $('.elsewhere').text('more here');
}
else if ($("#textContainer:contains('third text replacement')").length) {
    $('#textContainer').text('something');
    $('.elsewhere').text('text here');
}
});


Please see fiddle above for working version.

In this instance clicking on 'Left' or 'Right' would change the text above.

Is there a better way to handle this case? Main goal is to allow for easier extension of these simple functions into something more complex that involves several similar click events. Something less error prone and easier to maintain/grow. Any suggestions?
The easier (imho) solution would be to store what you want in an nested object containing the matches :

var selectors = {
  left: {
    'something': ['third text replacement', 'more here'],
    'third text replacement': ['now the next item', 'something new here'],
  }
};

var $textContainer = $('#textContainer')
  , $elsewhere = $('.elsewhere');
for (var sel in selectors) {
  void function(sel, matches) {
    $('#'+sel).click(function() {
      for (var i = 0; i &lt; matches.length; ++i) {
        // change "this.value" if it's not an input
        if (this.value == matches[i]) {
          // we found a match, let's update the value
          $textContainer.text(matches[i][0]);
          $elseWhere.text(matches[i][1]);
          // and return early
          break;
        }
      }
    });
  }(sel, selectors[sel]);
}