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