CSS/JS - Div show hide

[BradM]

I need a script that will allow me to show hide content inside of a div. I managed to get one working fine, super simple - but my JS sucks so I can't build on it.

I need for when you click a SECOND link the div opens and closes any other opened divs of the same class/ID. So basically just a tab system. Anyone have a super simple one available?

[StuartD]

function showDiv(x){
if(document.getElementById(x).style.display == 'none'){
document.getElementById(x).style.display = '';
}
else {
document.getElementById(x).style.display = 'none';

}
}

<input type="button" onclick="showDiv('divname');">

That one won't work the other "tabs" but it's pretty easy to add in....

[BradM]

yea that's pretty much what I have already. it keeps the old div open when you click a new one. means if I have 19 elements, they all get stacked. I want to close previous ones when a new one is opened.

[harvey]

http://fdsign.com/jeff/ams-final2/products.html

choose a product and click "supplement facts" to see it work

code:

<SCRIPT LANGUAGE="JavaScript">
function showElement(element)
{
var target = document.getElementById(element);
target.style.display='block';
}
function hideElement (element)
{
var target = document.getElementById(element);
target.style.display='none';
}
</SCRIPT>

and this is the code to place it (too lazy and busy to clean it, so see by yourself)

<DIV Name="id2" ID="id2" style="display:none; width:98%;height:auto;position:middle center;z-index:100;">
<img src="1-DAfacts.jpg" /> <div style="clear:both;background-color:#444444;border:1px #FFF solid;font-size:12px;font-weight:bold;padding:3px;"><A HREF="#nowhere" onclick="hideElement('id2');"><img style="padding:4px; border:0;"src="close.gif" /></A></div></DIV>

	<div class="pic"><img src="androsterone.jpg" alt="Androsterone" style="padding-left:5px;"/><a href="faq.html"><p><img src="faq.gif" alt="Frequently Asked Questions" style="border:0; padding-top:15px;"/></a></p><A HREF="#nowhere" onclick="showElement('id2');"><img src="supplement.gif" alt="Supplement Facts" style="border:0; padding-top:15px;"/></a></p></div>

basically give an ID to the div you want to show/hide and then hideElement('id2'); to hide and showElement('id2'); to show, very simple but effective

[fris]

check out mootools

http://demos111.mootools.net/

[Deej]

I think i just made a mess in my pants...

CSS and JS makes me hard!

[Bird]

Try changing the z-layer

[woj]

If you happen to use dreamweaver cs3, search for spry tutorial on youtube, it's super easy to setup even for someone who doesn't know shit about javascript...

[GrouchyAdmin]

Try changing the z-layer

I don't know why, but I smirked for some reason.

[acctman]

www.dynamicdrive.com should have what you're looking for, and if they dont they'll custom tweak stuff in the forum for you. very helpful site and users helping each other out

[BigBen]

I use jquery for stuff like that. Sounds like you're looking for something like this... http://docs.jquery.com/UI/Accordion

I've tried mootools and prototype and like jquery the most. Even if you aren't great with JS, this helps a ton.

[harvey]

http://fdsign.com/jeff/ams-final2/products.html

choose a product and click "supplement facts" to see it work

code:

<SCRIPT LANGUAGE="JavaScript">
function showElement(element)
{
var target = document.getElementById(element);
target.style.display='block';
}
function hideElement (element)
{
var target = document.getElementById(element);
target.style.display='none';
}
</SCRIPT>

and this is the code to place it (too lazy and busy to clean it, so see by yourself)

<DIV Name="id2" ID="id2" style="display:none; width:98%;height:auto;position:middle center;z-index:100;">
<img src="1-DAfacts.jpg" /> <div style="clear:both;background-color:#444444;border:1px #FFF solid;font-size:12px;font-weight:bold;padding:3px;"><A HREF="#nowhere" onclick="hideElement('id2');"><img style="padding:4px; border:0;"src="close.gif" /></A></div></DIV>

	<div class="pic"><img src="androsterone.jpg" alt="Androsterone" style="padding-left:5px;"/><a href="faq.html"><p><img src="faq.gif" alt="Frequently Asked Questions" style="border:0; padding-top:15px;"/></a></p><A HREF="#nowhere" onclick="showElement('id2');"><img src="supplement.gif" alt="Supplement Facts" style="border:0; padding-top:15px;"/></a></p></div>

basically give an ID to the div you want to show/hide and then hideElement('id2'); to hide and showElement('id2'); to show, very simple but effective

I took the sample down due to client's request, so try the code by yourself, it's foolproof without knowing shit of JS, even I can use it