Question

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 already tried and got the number of pages that has to be created and got the index.

How can i create pagination ? Like in the below case, i want “1,2,3” to be displayed because there are three sub headers. And on clicking 1, i should show only sub header 1 and the others should be hidden. How can it be done using jQuery?

<span>Click a Header!</span>
<div><h2>Sub Header 1</h2></div><div>Content 1</div>
<div><h2>Sub Header 2</h2></div><div>Content 2</div>
<div><h2>Sub Header 3</h2></div><div>Content 3</div>

$("h2").click(function () {
    // this is the dom element clicked
    var index = $("h2").index(this);
    var size = $("h2").size(this);
    $("span").text("That was Header index #" + index + "   Total Pages #" + size);
});

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

Answer 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