Stackoverflow 2012-03-06

by john_s

HTML

<div id="quoteContainer">
    <p>Quote 1</p>
    <p>Quote 2</p>
    <p>Quote 3</p>
    <p>Quote 4</p>
    <p>Quote 5</p>
</div>

JavaScript

$(document).ready(function () {
    var $quoteContainer = $('#quoteContainer');
    
    // Hide all quotes except the first one.
    $quoteContainer.find('p:not(:first)').hide();

    $quoteContainer.click(function () {
        var $visibleQuote = $quoteContainer.find('p:visible:first');
        var $nextQuote = $visibleQuote.next();
        
        if ($nextQuote.length == 0) {
            $nextQuote = $quoteContainer.find('p:first');
        }

        $visibleQuote.hide();
        $nextQuote.fadeIn();
    });
});