asked on

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.

Chris Stanyon

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...

VincentPuglia

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)

Richard Morris

ASKER

@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

Richard Morris

ASKER

@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.

Chris Stanyon

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.

Richard Morris

ASKER

@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.

Chris Stanyon

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

Richard Morris

ASKER

@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

ASKER CERTIFIED SOLUTION

Chris Stanyon

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

Richard Morris

ASKER

@ChrisStanyon clearly understands code at an advanced level, A+ programmer from start to finish, love him!