Click here to Skip to main content
14,664,352 members
Rate this:
Please Sign up or sign in to vote.
See more:
How do i enable a hidden div tag each time a next button is clicked using jquery and also how will i load the previous div tag when the previous button is clicked?
Posted
Comments
   
What's wrong with just reading documentation, say, on jQuery?
What does it mean, "load the previous div tag"? load from where?
—SA
Member 9971332 13-Mar-14 9:05am
   
there are 2 buttons: Previous and Next. On click of Next, the next div tag changes changes its hidden state and becomes available on the screen while on the click of Previous the previous tag with a new state of hidden becomes available.
   
I got it, but — load from where? Okay how many shown-one-at-a-time divs do you have and where are they stored? It they are all present on the page, hidden, it's fine, but then it's not a problem. If they are not, probably you also need server-side programming.
Can you see the point now?
—SA
Member 9971332 13-Mar-14 9:45am
   
hi, i tried putting the code here but looks disorganized. There are 10 divs which has its own unique question already queried from the database to the HTML webpage.

So on load of the page, the 1st div appears with its own question, when the Next button is clicked, the first div goes hidden while the next div gets enable to display on the screen and it goes on till the last div appears.

On click of the Previous button, the previous div then gets enabled while the div before it or the current div then becomes hidden.

I hope this explains everything to you.
Sergey Alexandrovich Kryukov 13-Mar-14 12:32pm
   
It's okay, in this very case. It looks like you are just confirming that you are keeping all div elements on your HTML, right?
Accordingly, you got two answers which should cover all the issues. Please don't forget to accept them formally (green "Accept" button). In all cases, your follow-up questions will be welcome.

Next time, please don't put code samples in comments, where you cannot make them readable. Please put them in the body of the question, using "Improve question" (no need to do it right now, unless you have some further concerns). Use "pre" tags to sandwich code, with the attribute lang="Javasript" (or "HTML", "cs", etc.)...

—SA
   
I guess you have rejected the answer after accepting it. In that case, please accept the answers.

Thanks,
Tadit

Rate this:
Please Sign up or sign in to vote.

Solution 4

Please see my comment to Solution 3. You would need some little fixes to it:

First, to show one of the div elements from the very beginning, you can, for example, remove style="display:none" from one of them. Then, you probably need to enable/disable buttons properly, because, at the very beginning, "Previous" makes no sense, and, at the very end, "Next" makes no sense. You can do it using jQuert .prop() function; for example:
btnPrevious = $("#btnPrevious");
btnNext = $("#btnNext");

//...

btnPrevious.prop("disabled", true);
btnNext.prop("disabled", false);
// ...


—SA
   
Comments
   
As usual, a 5 for you. Cheers!!!
Sergey Alexandrovich Kryukov 13-Mar-14 14:35pm
   
Thank you very much, Tadit.
—SA
Maciej Los 13-Mar-14 15:49pm
   
+5 for support to Tadit Dash answer.
Sergey Alexandrovich Kryukov 13-Mar-14 16:45pm
   
Teamwork! :-)
Thank you, Maciej.
—SA
   
Cheers !!!
Rate this:
Please Sign up or sign in to vote.

Solution 3

See if I have understood your problem correctly.

Demo here[^].
Comments
Sergey Alexandrovich Kryukov 13-Mar-14 12:21pm
   
You used right jQuery methods and, I think, demonstrated the main idea. The only little problem is: you did not show initial element, and Next/Previous disabling/enabling might be needed, not explained. Other than that, it's good, I voted 4 this time...
—SA
   
Correct. Thanks Sergey. :)
Sergey Alexandrovich Kryukov 13-Mar-14 12:28pm
   
I added some explanations on how to fix it; please see my Solution 4.
—SA
Maciej Los 13-Mar-14 15:48pm
   
A5 for effort!
   
Thanks a lot Maciej Los... :)

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)




CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100