Enabling a hidden div tag with a click of a button

Question

1.00/5 (1 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 13-Mar-14 2:44am

Member 9971332

Add a Solution

Comments

Sergey Alexandrovich Kryukov 13-Mar-14 8:59am

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.

Sergey Alexandrovich Kryukov 13-Mar-14 9:15am

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Mar-14 14:23pm

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

Thanks,
Tadit

2 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

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

Sergey Alexandrovich Kryukov · Answer 1 · 2014-03-13T06:27:00

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:

JavaScript

btnPrevious = $("#btnPrevious");
btnNext = $("#btnNext");

//...

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

—SA

Posted 13-Mar-14 6:27am

Sergey Alexandrovich Kryukov

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Mar-14 14:22pm

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Mar-14 1:50am

Cheers !!!

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) · Answer 2 · 2014-03-13T03:44:00

Solution 3

See if I have understood your problem correctly.

Demo here[^].

Posted 13-Mar-14 3:44am

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ)

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

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 13-Mar-14 14:19pm

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!

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 14-Mar-14 1:50am

Thanks a lot Maciej Los... :)