How can I show/hide div using Java Script on click of button

Question

I am trying to write a PHP Java Script, but struggling to write in this section of coding.

I am trying to make a buttom in form in that opens

The code I have written so far is

function display(e){
    if (e.clicked)
        document.getElementById('2').style.display = 'none';
    else
        document.getElementById('2').style.display = 'block';

and the FORM CODE is;

 <input type="button" value=" Book Now " onClick="display(this)"/></input>

any help to point out my clear mistakes would be great, the live code can be seen at http://affordablecleaners.co.uk/quote/

Thanks,

Henry

jeremy · Accepted Answer · 2012-11-13 23:35:20Z

2

Try something similar to the following

var i = 0;
var display = function() {
    document.getElementById('2').style.display = (i++ % 2) ? "none" : "block";
};

Essentially, we're creating a variable i and increasing it by one every time the function is called. If, when the function is called, i is an even number, then we set it to display: block. Otherwise, set it to display: none.

The biggest downside to this solution is cluttering the global scope. If this is an issue, you can also do the following.

var display = function() {
    document.getElementById('2').style.display = (document.getElementById('2').style.display == "none") ? "block" : "none";
};

edited Nov 13, 2012 at 23:35

answered Nov 13, 2012 at 23:16

jeremy

10.1k4 gold badges41 silver badges61 bronze badges

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

11 Comments

Henry Aspden Over a year ago

ooh, I like this, let me try it now

Henry Aspden Over a year ago

but wait, i think it needs to be ? "none" : "block"; as I want it to be hidden unless clicked

jeremy Over a year ago

Oh, sorry. If you want it to be shown the first time it's clicked, change it to either i = 1 or just change the statements (? "none" : "block"). Updated

Henry Aspden Over a year ago

hmm.. what is my onclick= ??? do i need to assign a function name to the javescript?

jeremy Over a year ago

onclick="display()", or assign this in the javascript.

|

John Citizen · Accepted Answer · 2012-11-13 23:36:16Z

0

Here's the (untested) logic...

function display(state, which){

if (state==1) {document.getElementById(which).style.display ='none';}

    else

    {document.getElementById(which).style.display = 'block';}
}

and then in your button...

to turn ON

onclick="display('1',someDIV)"

to turn OFF

onclick="display('0',someDIV)"

answered Nov 13, 2012 at 23:36

John Citizen

1941 gold badge2 silver badges10 bronze badges

4 Comments

Henry Aspden Over a year ago

can you have a double on click for one button?

John Citizen Over a year ago

This one is a toggle but you can use the L-Click for ON and R-Click for OFF if you want. Would you like that?

John Citizen Over a year ago

I don't know how to handle double clicks if that's what you meant.

jeremy Over a year ago

He wants to get rid of your state argument and have that be automatic within one click. He wants it to be an automatic toggle, basically... my script does that, though.

Collectives™ on Stack Overflow

How can I show/hide div using Java Script on click of button

2 Answers 2

11 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related