...

View Full Version : 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>

<!-- search function for buy -->
<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
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.


<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
Is that a good idea? Click on what? You cannot click on a form which is not displayed. Likely to lead to user frustration.


<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:


<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
Read Philip's code: You want a TOGGLE.

Here. The specific code for your actual situation:


<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
Read Philip's code: You want a TOGGLE.

Here. The specific code for your actual situation:


<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...



<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...


<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
Like I say, just pass the id of the element you want to toggle in the function call...


<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
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


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



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum