Load div using Jquery or Javascript

Question

I have 5 div on one page. Something like that:

<div id="div1"> some content </div>
<div id="div2"> some content </div>
<div id="div3"> some content </div>
<div id="div4"> some content </div>
<div id="div5"> some content </div>
<button> Load More </button>

I want to make only first div loaded, after clicks button Load more, then I want to be loaded second div, if he/she clicks one more time Load more button, I want to be loaded third div (but first two divs shouldn't hide). Is it possible using Javascript or Jquery?

I'm newbie in Javascript. I tried doing using this: http://jsfiddle.net/vendettamit/QB8Hv/ Tried different versions, but I couldn't :(

I don't need to make class hidden and display: none using css. I want this divs not to be loaded, if user doesn't click on button, because I have big traffic.

I thought if it's possible, to make like that: <div id="div1"> some content </div> <!---div id="div2"> some content </div-> <!---div id="div3"> some content </div-> <!---div id="div4"> some content </div-> <!---div id="div5"> some content </div-> and onclick remove this comment style for html. There are many pictures in divs and they won't be loaded. — user3475725
– user3475725, Commented Nov 3, 2016 at 19:19
This fiddle is working fine, but it doesn't do what I need. It loads only one thing every time. How do I make to load other div on next click? — user3475725
– user3475725, Commented Nov 3, 2016 at 19:23
Either you write the content of the divs dynamicly via javascript or you load the markup / content via AJAX into the page. — axel.michel
– axel.michel, Commented Nov 3, 2016 at 19:24
What do you mean "to load other div on next click"? What is the "other" div? — Scott Marcus
– Scott Marcus, Commented Nov 3, 2016 at 19:24

Paulo Martins · Accepted Answer · 2016-11-03 19:31:38Z

1

Set new class as "hide", and try something like:

var showNextElement = function() {
    var elements = $('.hide');
    $(elements[0]).removeClass('hide');
}

$('#btn').addEventListener('click', showNextElement);

answered Nov 3, 2016 at 19:31

Paulo Martins

1671 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user3475725 Over a year ago

Content will be loaded but not displayed. Because of big traffic I want not to load this content if user doesn't click load more.

Paulo Martins Over a year ago

you must write somehow, an identifier, how image link. And when you show this div, you calling the application from ajax to show content.

Paulo Martins Over a year ago

example: var requestUrl = $(elements[0]).data( "url" ); $.ajax({ url: "yourapp.com/public/images/" + requestUrl, method: GET, success: function (data) { //insert image inner div, and show } });

nvkrj · Accepted Answer · 2016-11-03 19:36:34Z

If I understand your question correctly.. you want to load a different image when the user clicks the second time. For that, you need to specify a different image source when the user clicks on it the second time.

There are two ways you could do this. One is to build a JavaScript array that will store the image source paths. When the user clicks on the button successively, take the next element from the array (by using an incremental variable).

For example,

var imageSources = [
    "image1.jpg", 
    "image2.jpg", 
    "image3.jpg", 
    "image4.jpg", 
    "image5.jpg", 
]

Then when the user clicks on the button,

function onClick()
{
     // Get number of image tags already loaded
     var numberOfDivsLoaded = document.getElementById("parentDiv").getElementsByTagName('img').length;

     // Get the next array element
     var nextImageSource = imageSources[numberOfDivsLoaded + 1]

     // Then create an append a new div containing this image to the parent div
}

The other way is to use AJAX. When the user clicks on the button, send an AJAX request to load the next image to your back-end script.

Collectives™ on Stack Overflow

Load div using Jquery or Javascript

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related