0

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

Edited by mano7859

3
Contributors
3
Replies
26
Views
4 Years
Discussion Span
Last Post by mano7859
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.