Solved

Show More Button JavaScript X Div Repeat

Posted on 2013-12-10
10
637 Views
Last Modified: 2013-12-12
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
Comment
Question by:Richard Morris
  • 5
  • 4
10 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39710968
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
 
LVL 15

Expert Comment

by:VincentPuglia
ID: 39711381
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
 

Author Comment

by:Richard Morris
ID: 39712634
@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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

Author Comment

by:Richard Morris
ID: 39712658
@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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39712837
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
 

Author Comment

by:Richard Morris
ID: 39713079
@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
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39713094
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
 

Author Comment

by:Richard Morris
ID: 39713141
@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
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 500 total points
ID: 39713808
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
 

Author Closing Comment

by:Richard Morris
ID: 39715491
@ChrisStanyon clearly understands code at an advanced level, A+ programmer from start to finish, love him!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
login jsp example 24 51
How can i  prevent default  Submision? 6 28
How has this flight information been added to this website? 7 25
Jquery 2 13
International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
In this tutorial viewers will learn how to position items using CSS's three positioning types Create a new HTML document with an internal stylesheet.: Create another div in CSS and name it Absolute : Type "position:absolute;" and "top:10px; left:50p…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

823 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question