onclick assistance please

rexhvn · 09-25-2012, 11:52 AM

Hi everyone,

Just hoping to get some assistance. I've created an onclick function for a form to appear which works fine, there are 2 things which I need assistance for.

1. I want the form to remain hidden as default until clicked for it to appear
2. I would also like the form to disappear once it is clicked again

I've kept the code as onmouseout="hide" just so it works (which is works fine)

My code is as below

<div onclick="show()" onmouseout="hide()" id="buyappear"><strong>Buy</strong></div>

<div class="searchfunction"><input type="text" Value="Search" class="searchform" size="40" height="25" /></div>


<script>function show(){

document.getElementById("buyrevealed").style.display = "block";
}

function hide(){
document.getElementById("buyrevealed").style.display = "none";
}
</script>

Any assistance would be appreciated.

Philip M · 09-25-2012, 12:57 PM

Quote:

Originally Posted by rexhvn

1. I want the form to remain hidden as default until clicked for it to appear
2. I would also like the form to disappear once it is clicked again

Is that a good idea? Click on what? You cannot click on a form which is not displayed. Likely to lead to user frustration.

Code:

<script type="text/javascript">
function Toggle(obj) {
var Style = document.getElementById(obj).style;
Style.display = (Style.display == "none") ? "block" : "none";
}
</script>

<div id="MyDiv">
	Form Content Goes Here
</div>

<a href="#" onclick="Toggle('MyDiv'); return false;">Toggle</a>

“Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)

rexhvn · 09-26-2012, 12:41 AM

Quote:

Originally Posted by Philip M

Is that a good idea? Click on what? You cannot click on a form which is not displayed. Likely to lead to user frustration.

Code:

<script type="text/javascript">
function Toggle(obj) {
var Style = document.getElementById(obj).style;
Style.display = (Style.display == "none") ? "block" : "none";
}
</script>

<div id="MyDiv">
	Form Content Goes Here
</div>

<a href="#" onclick="Toggle('MyDiv'); return false;">Toggle</a>

“Expert: a man who makes three correct guesses consecutively.” - Dr. Laurence J. Peter (American "hierarchiologist", Educator and Writer, 1919-1990)

I will re-explain the function.

The word 'login' for example. onclick the login

it will then display a form (THIS CURRENTLY WORKS FINE)

Re-click the word "login"

Form disappears.

Currently I cannot onclick the word login for the form to disppear. I currently have it set on 'onmouseout' which works fine. I just want to be able to click on the word instead. I also want the form as default to appear hidden.

Old Pedant · 09-26-2012, 01:29 AM

Read Philip's code: You want a TOGGLE.

Here. The specific code for your actual situation:

Code:

<div onclick="toggle()"><strong>Buy</strong></div>
<div id="buyrevealed" style="display: none;">
    ... your form ...
</div>
...
function toggle( )
{
    var div = document.getElementById("buyrevealed");
    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}
...

}

rexhvn · 09-26-2012, 05:03 AM

Quote:

Originally Posted by Old Pedant

Read Philip's code: You want a TOGGLE.

Here. The specific code for your actual situation:

Code:

<div onclick="toggle()"><strong>Buy</strong></div>
<div id="buyrevealed" style="display: none;">
    ... your form ...
</div>
...
function toggle( )
{
    var div = document.getElementById("buyrevealed");
    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}
...

}

Works perfectly, thank you very much!

rexhvn · 09-28-2012, 01:52 AM

Quote:

Originally Posted by Old Pedant

Read Philip's code: You want a TOGGLE.

Here. The specific code for your actual situation:

Code:

<div onclick="toggle()"><strong>Buy</strong></div>
<div id="buyrevealed" style="display: none;">
    ... your form ...
</div>
...
function toggle( )
{
    var div = document.getElementById("buyrevealed");
    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}
...

}

Is there a way I can have multiple toggle's?

Old Pedant · 09-28-2012, 02:14 AM

Of course.

How "generic" the toggle code is depends on your situation. Show the HTML and indicate what objects should toggle what targets.

xelawho · 09-28-2012, 02:43 AM

It would seem to me that Philip's code in post #2 can be used for multiple elements - just substitute the id of the element to be toggled for 'MyDiv' in the function call...

rexhvn · 09-29-2012, 08:31 AM

Hi everyone,

Below is my code for the toggle. I want the 'rentvealed', 'buyrevealed' and 'soldrevealed' to appear when they are onclicked, as they will all have different forms...

Code:

<div onclick="toggle()"><strong>Rent</strong></div>
<div onclick="toggle()"><strong>sold</strong></div>

<div id="rentrevealed" style="display: none;">
more code here....

<div id="soldrevealed" style="display: none;">
more code here....

/* Only for the buy revealed single toggle */
<div onclick="toggle()"><strong>Buy</strong></div>
<div id="buyrevealed" style="display: none;">
  current code here
</div>
...
function toggle( )
{
    var div = document.getElementById("buyrevealed");
    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}

If this is not sufficent, please let me know. Thanks for all your help

xelawho · 09-29-2012, 02:44 PM

Like I say, just pass the id of the element you want to toggle in the function call...

Code:

<body>
<div onclick="toggle('rentrevealed')"><strong>Rent</strong></div>
<div onclick="toggle('soldrevealed')"><strong>sold</strong></div>

<div id="rentrevealed" style="display: none;">
rent content here....
</div>
<div id="soldrevealed" style="display: none;">
sold content here....
</div>
<div onclick="toggle('buyrevealed')"><strong>Buy</strong></div>
<div id="buyrevealed" style="display: none;">
buy content here...
</div>
<script>
function toggle(id){
    var div = document.getElementById(id);
    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}
</script>
</body>

rexhvn · 10-01-2012, 03:47 AM

Quote:

Originally Posted by xelawho

Like I say, just pass the id of the element you want to toggle in the function call...

Code:

<body>
<div onclick="toggle('rentrevealed')"><strong>Rent</strong></div>
<div onclick="toggle('soldrevealed')"><strong>sold</strong></div>

<div id="rentrevealed" style="display: none;">
rent content here....
</div>
<div id="soldrevealed" style="display: none;">
sold content here....
</div>
<div onclick="toggle('buyrevealed')"><strong>Buy</strong></div>
<div id="buyrevealed" style="display: none;">
buy content here...
</div>
<script>
function toggle(id){
    var div = document.getElementById(id);
    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}
</script>
</body>

I want to toggle as well as what I have already done.

<div id="rentrevealed"><input type="text" value="search"</div>

Any help would be apprecaited. These are not to appear at the same time...

Click div1 - this will appear
click div2 something else will appear etc..

thanks guys

rexhvn · 10-06-2012, 01:48 PM

Help please?

Thank you.

rexhvn · 10-08-2012, 02:40 AM

I've just used seperate toggles so I figures it out.

Whats the best way to incorporate fadein effect?

Thanks

Philip M · 10-08-2012, 07:09 AM

Quote:

Originally Posted by rexhvn

Whats the best way to incorporate fadein effect?

As this is a completely different topic you should start a new thread with an appropriate title.

rexhvn · 01-16-2013, 12:00 AM

Hi guys,

I wanted to bring this thread back for some more assistance with the toggle function.

Currently I have 4 seperate toggle functions - lets call them 1,2,3,4

The code of each toggle is as follows

Code:

function toggle(1/2/3/4)
{
    var div = document.getElementById("buyrevealed");
    div.style.display = ( div.style.display == "block" ) ? "none" : "block";
}

Currently if I click toggle 1, all is good, however if I click toggle 2 while toggle 1 is displayed , Toggle 2 will not appear due to the way it is coded.

I was hoping to get assistance to hide any other toggle unless it is clicked on so there won't be an issue when clicking on any of them

Hope this makes sense.

Thanks guys