title: Jquery click function with same button display different text
body: <p>Hello eveyone I'm trying to using click function.When user clicks the button, second text will appear and the first one will be display none and then user click again the same button this time third text will appear and the second text will be display  and finally click the same button again fourth text will appear third one display none. Here is my function:</p>
  
  <pre><code>$("#slider1next").click(function () {
      $(".text").css('display', '');
      $("#first_one").css('display','none');                   
  });
  </code></pre>
  
  <p>here is the HTML</p>
  
  <pre><code>  &lt;button id="slider1next" &gt;Clickme&lt;/button&gt;
    &lt;p class="text" id="first_one"&gt;This is the first text&lt;/p&gt;
    &lt;p class="text" id="second_one" style="display:none"&gt;This is the second text&lt;/p&gt;
    &lt;p class="text" id="third_one" style="display:none"&gt;This is the third text&lt;/p&gt;
    &lt;p class="text" id="fourth_one" style="display:none"&gt;This is the four text&lt;/p&gt;​
  </code></pre>
  
  <p>Also you can see there <a href="http://jsfiddle.net/ganymedes/7kxAE/" rel="nofollow">http://jsfiddle.net/ganymedes/7kxAE/</a></p>