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 :))

Recommended Answers

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

Jump to Post

All 3 Replies

Member Avatar

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

Do you have this online or in jsfiddle?

Hi stbuchok and JorgeM,

This is my jsfiddle: Click Here

Thanks for your help :)

Be a part of the DaniWeb community

We're a friendly, industry-focused community of 1.20 million developers, IT pros, digital marketers, and technology enthusiasts learning and sharing knowledge.