• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 684
  • Last Modified:

Show More Button JavaScript X Div Repeat

Show 10 divs then show another 10 divs then show another 10 divs until all divs in the series have been shown using a show more button JavaScript.

<script type="text/javascript">
id=stuff {
div 1 to 10 – display: default
div 10+ – display: none
}
id=show {
display next 10 divs – listen for show more button click
}
</script>

<html>
<div id="stuff"></div> display the first 10 divs with the ids stuff – the rest are display: none through infinity
<a id="show" href="#">Display 10 More Divs</a>
</html>

Open in new window


Problem: My JavaScript has a bug in it when I click the link nothing happens, please help.
0
Richard Morris
Asked:
Richard Morris
  • 5
  • 4
1 Solution
 
Chris StanyonCommented:
You're going to need to give us more than that!!!

You say your Javascript has a bug it!! There is no Javascript

You say the link does nothing when you click - you haven't coded anything to happen when you click.

You say you want to keep showing DIVs until all in a series are shown - what series?

In HTML, an ID is unique - you should only ever have one element on your page with an ID of  'stuff'. If you need more, then switch it to a class

This really is too vague to know what you want...
0
 
VincentPugliaCommented:
Hi Morris,

   Are you trying to display "10 more divs" (which means the page height will grow) or the next 10 elements (rows, links, images, whatevers) within the same div (page size stays the same)?  (They are 2 distinct things)

if the latter, the code should look something like this:

  document.getElementById('stuff').innerHTML = getNext10();

 // where getNext10() loops through your array (presuming that's where the data will be) and passes them to the div.

What you are showing

div 1 to 10 – display: default
div 10+ – display: none

implies you have already created 'x' number of divs, and you just want to change the display attribute (something like:
  document.getElementById('stuff11').style.display = 'block';

so, as Chris mentioned, you need to be a bit more specific.  
eg where is the data stored?  (if on the server, then you need an ajax (eg) call in the onclick)
0
 
Richard MorrisAuthor Commented:
@ChrisStanyon

I have expanded upon my divs and tightened up my JavaScript to speed up on my page loads plus I am now using classes, see below:

<script type="text/javascript">
class="show" {
display 3 additional divs in order in class series="stuff" each time link is clicked
}
</script>

<html>
<div>1</div> display the first 3 divs
<div>2</div> display the first 3 divs
<div>3</div> display the first 3 divs
<div style="display: none;" class="stuff">4</div> display 3 additional divs in order with the classes stuff
<div style="display: none;" class="stuff">5</div> display 3 additional divs in order with the classes stuff
<div style="display: none;" class="stuff">6</div> display 3 additional divs in order with the classes stuff
<div style="display: none;" class="stuff">7</div> display 3 additional divs in order with the classes stuff
<div style="display: none;" class="stuff">8</div> display 3 additional divs in order with the classes stuff
<div style="display: none;" class="stuff">9</div> display 3 additional divs in order with the classes stuff
<a class="show" href="#">Display 3 Additional Divs in Order</a>
</html>

Open in new window

0
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
Richard MorrisAuthor Commented:
@VincentPuglia

1) I am trying to display more divs so yes the page height will grow.

2) If I was trying to display more non div elements (I’m not) the page height would still grow would it not unless I made an empty space for them, so I don’t understand the point of this question.

document.getElementById('stuff11').style.display = 'block';

This might work but I see you gave my classes numbers, is there away to avoid using stuff1, stuff2, stuff3 on my divs as numbering makes extra work for me to do, I just want to use the class stuff on all the divs regardless of how many I have, like make the rule all divs with class stuff are to be numbered 1 through x via the JavaScript so that I don’t have to do it manually unless you think this would affect page load then of course I’ll number them manually because I hate chunky JavaScript that slows me down when I’m surfing.

All of the data in each of the divs is stored in my head rather than in a database which I then translate into the HTML directly which is excellent for SEO because a search engine cannot read data from a database that has not been rendered however when the data is translated from my head the search engine can read all of the data without using AJAX, that is why I want display: none on all of the divs below the first set that I want visible and a simple link to make the display: none divs appear 3 at a time in order when clicked upon.
0
 
Chris StanyonCommented:
OK. Here you go - here's a jQuery solution. Basically, those DIVs that you want hidden, you add a class to. The Show More link then removes the 'hidden' class from 3 of the DIVs, until there are no more to show. It then removes the Show More link from the page:

http://jsfiddle.net/ChrisStanyon/jjBZD/

Have a play and let me know if there's something you don't understand.
0
 
Richard MorrisAuthor Commented:
@ChrisStanyon

This script works better than I originally planned for because I forgot about the button and would have probably left it hanging there due to lack of thought.

However, I like wrapping things in divs and would need the div containing the button to vanish, I made such a function below but not sure if it is correct because I used an ID twice which I now know is a bad thing to do.

$('#showMore').click(function(e) {
    e.preventDefault();
    //remove the hidden class from x DIVs
    $('div.stuff.hidden:lt(x)').removeClass('hidden');

    //do we still need to see the Show More button
    if (!$('div.stuff.hidden').length) { $(this).remove(); }
})

.hidden { display: none; }

<div class="stuff">Div 1</div>
<div class="stuff">Div 2</div>
<div class="stuff">Div 3</div>
<div class="hidden stuff">Div 4</div>
<div class="hidden stuff">Div 5</div>
<div class="hidden stuff">Div 6</div>
<div class="hidden stuff">Div 7</div>
<div class="hidden stuff">Div 8</div>
<div class="hidden stuff">Div 9</div>
<div class="hidden stuff">Div 10</div>
<div class="hidden stuff">Div 11</div>
<div id="showMore"><p><a href="#" id="showMore">Show More...</a></p></div>

Open in new window


Now that you know this is what I wanted to begin with, should it be converted from a JQuery to a JavaScript for easier deployment, right now I do not have any JQuery on my website is why I ask.
0
 
Chris StanyonCommented:
Yeah, you can't use the same ID twice. Leave the ID on the A and remove it from the DIV, and then change the jQuery to this (added the parents bit at the end):

$('#showMore').click(function(e) {
    e.preventDefault();
    //remove the hidden class from x DIVs
    $('div.stuff.hidden:lt(x)').removeClass('hidden');

    //do we still need to see the Show More button
    if (!$('div.stuff.hidden').length) { $(this).parents('div').remove(); }
})

Open in new window

Pretty much all javascript I do these days uses jQuery - for the size of the library, it's a no brainer - it really makes this kind of thing so easy, so I would stick with jQuery. For speed, just include the library from one of the CDNs - google or jquery (I use Google)

In the HEAD of your document, add this:

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

Open in new window

Then just wrap your jQuery inside a document ready block

<script type="text/javascript">		
$(document).ready(function() {
   $('#showMore').click(function(e) {
      e.preventDefault();
      $('div.stuff.hidden:lt(x)').removeClass('hidden');
      if (!$('div.stuff.hidden').length) { $(this).parents('div').remove(); }
   })
});
</script>

Open in new window

0
 
Richard MorrisAuthor Commented:
@ChrisStanyon

I have updated the script a bit more as sometimes I have many nested divs so not sure if I did it right or not?

<html>
<head>

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<style type="text/css">
.hidden { display: none; }
</style>

</head>
<body>

<script type="text/javascript">		
$(document).ready(function() {
   $('#showMore').click(function(e) {
      e.preventDefault();
      $('div.stuff.hidden:lt(x)').removeClass('hidden');
      if (!$('div.stuff.hidden').length) { $('div#linkWrapper').remove(); }
   })
});
</script>

<div class="stuff">Div 1</div>
<div class="stuff">Div 2</div>
<div class="stuff">Div 3</div>
<div class="hidden stuff">Div 4</div>
<div class="hidden stuff">Div 5</div>
<div class="hidden stuff">Div 6</div>
<div class="hidden stuff">Div 7</div>
<div class="hidden stuff">Div 8</div>
<div class="hidden stuff">Div 9</div>
<div class="hidden stuff">Div 10</div>
<div class="hidden stuff">Div 11</div>
<div id="linkWrapper"><div><p><a href="#" id="showMore">Show More...</a></p></div></div>

</body>
</html>

Open in new window

0
 
Chris StanyonCommented:
Yeah - looks good. The only comment I'd make would be that normally the script tags go in the HEAD - it's not absolutely necessary, just good-practice.

Other than that - perfect :)
0
 
Richard MorrisAuthor Commented:
@ChrisStanyon clearly understands code at an advanced level, A+ programmer from start to finish, love him!
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

  • 5
  • 4
Tackle projects and never again get stuck behind a technical roadblock.
Join Now