Hide and show div on load

[mano7859]

Hi :)

Sorry to be boring but I have a problem to display and hide some div.

I'm explaining.

I have this html code:

<div id="subMain">
  <div id="archivesResult_Content">
    <div id="archivesResult_title">
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="14">
            <div class="categorie" cat="13">
            <div class="categorie" cat="16">
            <div class="categorie" cat="17">
        </div>
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="3">
            <div class="categorie" cat="13">
            <div class="categorie" cat="11">
        </div>
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="2">
        </div>
        <div class="box">
            <div class="date"></div>
            <div class="categorie" cat="2">
            <div class="categorie" cat="3">
        </div>
  </div>
</div>

I would like to display when page loads only the 5 categories

To do that i've created this jquery code:

$(function(){

    // To define the total of div categorie  
    var nbreDiv=$("#subMain").find(".categorie").length;

    // Hide all div except the 5
    if(nbreDiv>5){

        $("div .categorie").not('div .categorie:lt(5)').parent().hide();

    }

});

It works half.

1st question : If I put 4 instead of 5 for example. My parent div doesn't display :/

Imagine that the code above works.

I would like to have a button, after the last fifth div displayed.
If I click on it, it's going to show the 5 next divs and being after them.
If I click again, It's goingto show the 5 next divs etc.

I've created this jquery code based on the code above. It doesn't work

    $(function(){

        // To define the total of div categorie  
        var nbreDiv=$("#subMain").find(".categorie").length;


        if(nbreDiv>5){

            // Hide all div except the 5
            $("div .categorie").not('div .categorie:lt(5)').parent().hide();

            // Create a button after the 5 first
            $("div.box:visible").after('<div class="button" name="button">see the other posts</div>');

            // Action if click on the div button
                $(".button").click(function(){

                    // Delete the button
                    $(".button").remove();

                    // Display other div 
                    $("div .box").next('div .box').show();


                    // Create a button after the 5 first
                    $("div.box:visible").after('<div class="button" name="button">see the other posts</div>');

                });

        }

});

Thanks to your help :))

Before anything else, you are missing most of your closing tags for your divs.

[JorgeM]

Do you have this online or in jsfiddle?

[mano7859]

Hi stbuchok and JorgeM,

This is my jsfiddle: Click Here

Thanks for your help :)