title: jQuery: Trouble with multiple current overstates
body: <p>I want to customize my jQuery script to recognize different "current" states when I click on 1 of 3 different tabs. Currently the code only allows one "current" state to be recognized so when I click on a different tab the same overstate for the button is shown. I have sifted through my code for many hours and I now differ to your expertise for help.</p>
  
  <p><strong>Possible solution?:</strong>
  Add in some sort of ID listener that recognizes what current state to display as the overstate.</p>
  
  <p><strong>HTML Snippet:</strong></p>
  
  <pre><code>&lt;ul class="nav"&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="textSpacer.png" width="87" height="20"&gt;&lt;/a&gt;
    &lt;ul&gt;
      &lt;img src="subContentSearch.gif"&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="textSpacer.png" width="84" height="20"&gt;&lt;/a&gt;
      &lt;ul&gt;
      &lt;img src="subContentNewsSignUp.gif"&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  &lt;li&gt;&lt;a href="#"&gt;&lt;img src="textSpacer.png" width="100" height="20"&gt;&lt;/a&gt;
      &lt;ul&gt;
      &lt;img src="subContentMyVictory.gif"&gt;
      &lt;/ul&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p></p>
  
  <p><strong>jQuery.Clickme.js:</strong></p>
  
  <pre><code>(function($) {
  
  $.fn.clickMe = function(op_user) {
  
      var menuName = this,                
          op = $.extend( cm.op_default , op_user);
  
      $(menuName).find("li:has(ul)").addClass("arrow");
      // move content to inicial margin
      $(op.moveIt).css({ marginTop: op.moveItMargin });
  
      //  anchor inside menu active the code
      $(menuName).find("a").click(function() {
  
          var ulsVisible = $(menuName).find("ul").is(":visible");
          var testUl = $(this).next("ul").is(":visible");
  
          // hide and remove op.activeMenu class from visible list inside the menu 
          if (ulsVisible) {
              // know if the anchor that active the function is visible
              if(testUl) {                    
                  $(menuName).find("li").removeClass(op.activeMenu);
                  moveContent(); 
                  $(this).next("ul").animate(op.aniHide, op.speed);           
              } else {
                  $(menuName).find("li").removeClass(op.activeMenu);                      
                  $(menuName).find("ul").animate(op.aniHide, op.speed);
                  $(this).parent("li").addClass(op.activeMenu);
                   moveContent();
                  $(this).next("ul").animate(op.aniShow, op.speed );
              }
          } else {
              $(this).parent("li").addClass(op.activeMenu);
              moveContent();
              $(this).next("ul").animate( op.aniShow, op.speed);          
          }
      });
  
      // Move content 
      function moveContent() {
  
          var ulHeight = $("."+op.activeMenu +" ul").height() ;
          var moveMargin = parseFloat($(op.moveIt).css("margin-top"));
          var dif = ulHeight + op.moveItMargin - moveMargin;                  
  
          if (ulHeight == moveMargin) {
  
          } else if (ulHeight &lt; moveMargin) {
              $(op.moveIt).animate({marginTop: "+=" + dif}, op.speed);
  
          } else if (ulHeight &gt; moveMargin){
              $(op.moveIt).animate({marginTop: "+=" + dif}, op.speed);            
  
          }                                           
      }
  
  };
  
  var cm = $.fn.clickMe;
  cm.op = {};
  cm.op_default = {
      activeMenu: "current",
      moveIt: ".content",
      moveItMargin : 0,
      aniShow: { opacity: "show", height: "show"},
      aniHide: { opacity: "hide", height: "hide"},
      speed: "fast"
  };
  </code></pre>
  
  <p>})(jQuery);</p>
  
  <p><strong>CSS Snippet being Used:</strong>
  .current {background-color: #D1EFEF;}
  .current a {color: #FFF; background-image:url("siteSearch_down.gif");}
  .current a:hover {color: #000;}</p>
  
  <p><br/>
  I am sincerely thankful for your time and help.</p>