I've created a [JSFiddles](http://jsfiddle.net/VFqTW/27/).

I would like to remove repeat clicking because the clicks create an animation. 

I understand now that `$(this).off('click');` will do the trick; however,

Where I run into problems is how can I turn `.on()` the click after any new listitem has been clicked.

Also noted, `.one()` seems to be a good solution; however, I'm unsure on how to use this while maintaining my same symantics. Thank you.

```
var carItems = $('.carousel_item');
var sideitems = $('.side_item');
var x = false;
$(sideitems).hide();
fadeItem();
$(carItems).on({
    click: function() {
        $(sideitems).stop(true, true).animate({
            right: '4.5em'
        });
        $(sideitems).hide();
        fadeItem();
    },
    mouseenter: function() {},
    mouseleave: function() {}
});

function fadeItem() {
    $('.side_ul li:hidden:first').fadeIn(fadeItem).animate({
        right: '-4.5em'
    }, 150, function() {});;
}​

```

**HTML**

```
<div id="carousel" class="flexslider">
      <ul class="slides">
        <li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li>
        <li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li>
        <li class="carousel_item"> <img src="asset/img/1600/slide1_1600.jpg" /> </li>
        <li class="carousel_item"> <img src="asset/img/1600/slide2_1600.jpg" /> </li>
        <!-- items mirrored twice, total of 12 -->
      </ul>
    </div>

      <nav class="side_nav">
    <ul class="side_ul">
        <li class="side_item home"><div class="text_links"><a href="#">home</a></div></li>
        <li class="side_item document"><div class="text_links"><a href="#">docs</a></div></li>
        <li class="side_item video"><div class="text_links"><a href="#">video</a></div></li>        
        <li class="side_item programming"><div class="text_links"><a href="#">web</a></div></li>

    </ul>
  </nav>

```

![enter image description here](https://i.stack.imgur.com/5LK2M.jpg)