/    Sign up×
Community /Pin to ProfileBookmark

Show One Div & Hide two other divs help

Copy linkTweet thisAlerts:
Apr 12.2010

Guys, I need help with the javascript toggle function, I have 3 divs containing images floated next to each other and when clicked i want a new div to appear beneath these 3 images.

Clicking on the first image i want a new div to appear beneath these 3 images. Clicking on the second image must hide all other divs and only show the content for that div.

I hope I have explained it ok – apologies if i havent.

to post a comment
JavaScript

7 Comments(s) ↴

Copy linkTweet thisAlerts:
@JMRKERApr 12.2010 — Post a sample of the HTML that you want the JS to operate on.

(Or perhaps 3 different views of button actions)
Copy linkTweet thisAlerts:
@BIOSTALLApr 12.2010 — How about something like this:

[code=html]<script language="javascript">

function showDiv(div_number) {

// hide all three divs
document.getElementById('contact_div_1').style.display = 'none';
document.getElementById('contact_div_2').style.display = 'none';
document.getElementById('contact_div_3').style.display = 'none';

// just show the div we want
document.getElementById('contact_div_'+div_number).style.display = 'block';

}

</script>

<div style="float:left;"><a href="#" onclick="showDiv('1')"><img src="image1.jpg" border="0" /></a></div>
<div style="float:left;"><a href="#" onclick="showDiv('2')"><img src="image2.jpg" border="0" /></a></div>
<div style="float:left;"><a href="#" onclick="showDiv('3')"><img src="image3.jpg" border="0" /></a></div>

<div style="clear:both;"></div>

<div id="contact_div_1" style="display:none">I am the content for the first image</div>
<div id="contact_div_2" style="display:none">I am the content for the second image</div>
<div id="contact_div_3" style="display:none">I am the content for the third image</div>[/code]

Let me know if you require any explanation on the above.
Copy linkTweet thisAlerts:
@R4N_S_SauthorApr 13.2010 — biostall - that looks like it is what i need.

WIll implement it into my code and let you know how i get on.

Cheers

ran
Copy linkTweet thisAlerts:
@R4N_S_SauthorApr 13.2010 — I have go this working with the divs i need - however the other issue i have is that i want the images at the top to change.

The 3 images represent 3 different regions in the world and the divs below show their corresponding data.

would like it to highlight the region you have clicked on.

Please help - i need this complete within the hour ?
Copy linkTweet thisAlerts:
@R4N_S_SauthorApr 13.2010 — bttt
Copy linkTweet thisAlerts:
@QuidamApr 13.2010 — [code=html]
<script language="javascript">

function showDiv(div_number) {

// hide all three divs
document.getElementById('contact_div_1').style.display = 'none';
document.getElementById('contact_div_2').style.display = 'none';
document.getElementById('contact_div_3').style.display = 'none';

// just show the div we want
document.getElementById('contact_div_'+div_number).style.display = 'block';

// Change image
document.getElementById('contact_div_'+div_number).innerHTML = '<img src="myimage.jpg" />';

}

</script>
[/code]
Copy linkTweet thisAlerts:
@R4N_S_SauthorApr 13.2010 — cheers for that script but i got it working earlier so thanks a bunch guys - i couldnt have done it without you.

I really do need to pick up my Javascript as that is what is letting me down - im fine with html and css.
×

Success!

Help @R4N_S_S spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.17,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...