On Click Display Div [Archive] - Dynamic Drive Forums

View Full Version : On Click Display Div

Adnan959

09-26-2010, 05:43 PM

Hey Guys,

I will try to keep this short. I'm trying to achieve something like this:
http://www.promotionalcodes.org.uk/new-codes-and-discounts/
(Please click on the "Click to Reveal Code & Open Site" button)

Notice how the button disappears and a new area appears. This is basically what I want to achieve. I have a similar site setup, for which I want to implement this one.
http://www.fashiondiscountvouchers.com/test1

I'm thinking, upon the click of the button, the first div disappears and the second one appears. How do I achieve this? Is there a tutorial anyone is aware of?

I know my HTML/CSS well, but I haven't done things like this. Sorry for being a little stupid.

Thanks and appreciate a speedy response.

Thanks

Adnan

Nile

09-26-2010, 10:34 PM

You can play around with this:
[code[
<style type="text/css">
#box {
height: 100px;
width: 100px;
background: lightblue;
}
#box2 {
height: 100px;
width: 100px;
background: blue;
visibility: hidden;
}
</style>
<div id="box" onclick="document.getElementById('box').style.visibility = 'hidden';
document.getElementById('box2').style.visibility = 'visible';"> </div>
<div id="box2"> </div>
[/code]

molendijk

09-26-2010, 11:49 PM

Yes, something like the solution proposed by Nile. More generally (using javascript):

<head>
<style type="text/css">
#box1 {
position:absolute;
height: 100px;
width: 100px;
background: lightblue;
display:inline
}
#box2 {
position:absolute;
height: 100px;
width: 100px;
background: blue;
visibility: hidden;
display:inline
}
#box3 {
position:absolute;
left:120px
}
</style>

<script type="text/javascript">
function change_div(this_div,that_div,code)
{
document.getElementById(this_div).style.visibility = 'visible';
document.getElementById('box3').innerHTML=code;
document.getElementById(that_div).style.visibility = 'hidden';
}
</script>

</head>

<body>
<div id="box1" onclick="change_div('box2','box1','Here is the code → \'FREEDEL\'')"> </div>
<div id="box2" onclick="change_div('box1','box2','Get your code')"> </div>
<div id="box3">Get your code</div>

</body>
===
Arie Molendijk.

Adnan959

09-28-2010, 11:28 AM

Thanks Nile and molendijk. That really did help. :)

I've been able to set this up now.

Thanks a lot once again for being of such a great help. Appreciate it.

Nile

09-30-2010, 08:06 PM

No problem, I'm glad to help.

Here on DD, we like to keep things organized. In an effort to do so, you have the option to set a thread to resolved when an issue is fixed. To make the status of the thread resolved:
1. Go to your first post
2. Edit your first post
3. Click "Go Advanced"
4. In the dropdown next to the title, select "RESOLVED"