title: jQuery Carousel. How to show the Next or Previous Element only
body: <p>I have a jQuery problem, and I've really tried everything I know (i am so newbie at this) so ..</p>
  
  <p>The problem in short is I am doing a simple carousel-like effect. I am using this code.</p>
  
  <p>(The div .showarea is the DIV which needs to be rotated (next/prev) but I want to keep only one div shown at a time.)</p>
  
  <p>This is the html markup.</p>
  
  <pre><code>    &lt;div class="maincarousel"&gt;
         &lt;div class="showarea"&gt;&lt;a href="#"&gt;&lt;img src="img/sampleshow.png" alt="" title="" /&gt;&lt;/a&gt;&lt;/div&gt;
         &lt;div class="showarea"&gt;&lt;a href="#"&gt;&lt;img src="img/sampleshow2.png" alt="" title="" /&gt;&lt;/a&gt;&lt;/div&gt;
         &lt;div class="showarea"&gt;&lt;a href="#"&gt;&lt;img src="img/sampleshow3.png" alt="" title="" /&gt;&lt;/a&gt;&lt;/div&gt;
         &lt;a href="#carouselPrev" class="leftarrow" title="Previous"&gt;&lt;/a&gt;
         &lt;a href="#carouselNext" class="rightarrow" title="Next"&gt;&lt;/a&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>This is my jquery attempt</p>
  
  <pre><code>$('.showarea').hide();
  $('.showarea:first').fadeIn(500);
  
  $('.maincarousel a').click(function () {
  
      if ($(this).attr('href') == '#carouselNext') {
          $('.showarea').hide();
          $('.showarea').next('.showarea').fadeIn(500);
      }
  
      if ($(this).attr('href') == '#carouselPrev') {
          $('.showarea').hide();
          $('.showarea').prev('.showarea').fadeIn(500);
      }
  
  });
  </code></pre>
  
  <p>Unfortunately, next() and prev() won't display the next element only, but all next elements and same thing for prev(). Any quick workaround.. </p>
  
  <p>Can someone help me on this,</p>
  
  <p>Thanks</p>