Solved

Show More Button JavaScript X Div Repeat

Posted on 2013-12-10
10
619 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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
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
Comment Utility
@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
 

Author Comment

by:Richard Morris
Comment Utility
@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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 

Author Comment

by:Richard Morris
Comment Utility
@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 42

Expert Comment

by:Chris Stanyon
Comment Utility
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
Comment Utility
@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 42

Accepted Solution

by:
Chris Stanyon earned 500 total points
Comment Utility
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
Comment Utility
@ChrisStanyon clearly understands code at an advanced level, A+ programmer from start to finish, love him!
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

Things That Drive Us Nuts Have you noticed the use of the reCaptcha feature at EE and other web sites?  It wants you to read and retype something that looks like this.Insanity!  It's not EE's fault - that's just the way reCaptcha works.  But it is …
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
In this tutorial viewers will learn how to style transparent/translucent elements using alpha transparency in CSS Start with a normal styled element, such as a div.: Define its "background-color" property as "rgba (255, 255, 255, .5): The numbers in…
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…

772 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

Need Help in Real-Time?

Connect with top rated Experts

14 Experts available now in Live!

Get 1:1 Help Now