title: jquery toggle 3 state with initial state
body: <p>jQuery toggle() support multiple states, and it cycles through as many as you give it</p>
  
  <p>From the <a href="http://api.jquery.com/toggle-event/" rel="nofollow">documentation</a>:</p>
  
  <blockquote>
    <p>If more than two handlers are provided, .toggle() will cycle among all
    of them. For example, if there are three handlers, then the first
    handler will be called on the first click, the fourth click, the
    seventh click, and so on.</p>
  </blockquote>
  
  <p>The following code works great, cycling through all three states.</p>
  
  <pre><code>$('#tag').toggle(function() {
    //set cssClass to 'on'
    //remove all other classes
  }, function() {
    //set cssClass to 'off'
    //remove all other classes
  }, function() {
    //set cssClass to 'none'
    //remove all other classes
  });
  </code></pre>
  
  <p>My question is about the fact that on inital page load, the class is being set on the #tag by the backend but when clicking the tag toggle() starts the cycle from the first toggle state of  'on' regardless of initial state.</p>
  
  <p>I suppose what I am looking for is a smart toggle that goes to the next state based on an option for the current state passed in.</p>
  
  <p>I may be adding four states, so I do not want complex if else statements.</p>
  
  <p>n.b The class setting and removing is just an example. I am doing other things. Please do not give adding and removing classes examples - Although you can check the class to find the initial state.</p>