Pagination Of Html Content Using Jquery

I am new to jQuery. In the below code, I am trying to do a pagination for each sub header, If i click sub header 1, the page should show only the content of sub header 1. I have al

Solution 1:

Is this what you are trying to achieve?

$("h2").click(function () {
    $("h2").not(this).parent().next().hide();
    $(this).parent().next().show();
});

Explanation:

• Take all the H2s, except the clicked one, go to parent (DIV containing the H2s), get next element (DIV with content), hide all the DIVs containing content
• Take the clicked H2, traverse in the similar manner, make sure the DIV with content is shown

Solution 2:

This seems to be what you're trying to do, hopefully in a more organized approach.

If you're trying to chunk text (like news stories or whatnot), there's plugins out there that can help smooth that over. You just need to do some research and find what's appropriate for what you're needing.

Some examples include:

• Easy Paginate
• jPaginate
• Sweet Pages

Note, pagination also refers to table data pagination, and to a lesser degree listmaking. So be aware when you go looking to make sure you're specific, or you might find some odd results. Also be aware that many times pagination occurs at the server, although that's not required. Some "new media" sites do load the entire article and then toggle between screens, a la The Daily Beast.

HTML

<divid="msg">Click a Header to Show Associated Content</div><divclass="story"><h2>Sub Header 1</h2><div>Content 1</div></div><divclass="story"><h2>Sub Header 2</h2><div>Content 2</div></div><divclass="story"><h2>Sub Header 3</h2><div>Content 3</div></div>

CSS

.story > div {
    display: none;
}

jQuery

$(document).ready(function(){
    var$headers = $(".story h2"),
        $msg = $('#msg');

    $headers.click(function(){
        var$this = $(this),
            $content = $headers.not(this).siblings('div'),
            msg = "Select story #" + $this.text();

        $content.hide();

        $this.siblings('div').show();

        $msg.text(msg);
    });
});

http://jsfiddle.net/userdude/GtDHW/1/