title: JQuery cycle through text on click
body: <p>I am trying to create a jquery function that will change the text displayed on click and cycle through 7 different paragraphs or divs.
  as an example I have created 7 different divs, and would like them to cycle through like the cycle function does but on a click command rather than timed.</p>
  
  <p>here is what i have so far:</p>
  
  <pre><code>&lt;div id="content-1"&gt;Sample text1&lt;/div&gt;
  &lt;div id="content-2"&gt;Sample text2&lt;/div&gt;
  &lt;div id="content-3"&gt;Sample text3&lt;/div&gt;
  &lt;div id="content-4"&gt;Sample text4&lt;/div&gt;
  &lt;div id="content-5"&gt;Sample text5&lt;/div&gt;
  &lt;div id="content-6"&gt;Sample text6&lt;/div&gt;
  &lt;div id="content-7"&gt;Sample text7&lt;/div&gt;
  </code></pre>
  
  <p>and JS</p>
  
  <pre><code>$(document).ready(function () {
      var divs = $('div[id^="content-"]').hide(),
          i = 0;
  
      (function cycle() {
          divs.eq(i).fadeIn(400)
              .delay()
              .fadeOut(400, cycle);
  
          i = ++i % divs.length;
  
      })();
  });
  </code></pre>