CodingForums.com - onclick assistance please

CodingForums.com (http://www.codingforums.com/index.php)

- JavaScript programming (http://www.codingforums.com/forumdisplay.php?f=2)

- - onclick assistance please (http://www.codingforums.com/showthread.php?t=274142)

rexhvn

09-25-2012 11:52 AM

onclick assistance please

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 (Post 1273228)

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 (Post 1273252)

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 (Post 1273475)

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 (Post 1273475)

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 (Post 1274764)

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 (Post 1277381)

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

All times are GMT +1. The time now is 08:54 PM.