CSS/JS - Div show hide - GoFuckYourself.com

BradM · 08-07-2008, 01:35 PM

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 · 08-07-2008, 01:38 PM

BradM · 08-07-2008, 01:44 PM

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 · 08-07-2008, 01:53 PM

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

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

code:

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)

Code:

<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 · 08-07-2008, 02:01 PM

check out mootools

http://demos111.mootools.net/

Deej · 08-07-2008, 02:33 PM

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

CSS and JS makes me hard!

Bird · 08-07-2008, 02:43 PM

Try changing the z-layer

woj · 08-07-2008, 02:43 PM

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 · 08-07-2008, 02:44 PM

Quote:

Originally Posted by Bird

Try changing the z-layer

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

acctman · 08-07-2008, 03:04 PM

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 · 08-07-2008, 03:31 PM

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 · 08-07-2008, 04:03 PM

Quote:

Originally Posted by harvey

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

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

code:

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)

Code:

<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

08-07-2008, 01:35 PM	#1
BradM Confirmed User Join Date: Dec 2003 Location: 1123,6536,5231 Posts: 3,397	CSS/JS - Div show hide 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?

08-07-2008, 01:38 PM	#2
StuartD Sofa King Band Join Date: Jul 2002 Location: Outside the box Posts: 29,903	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.... __________________ This is me on facebook This is me on twitter

08-07-2008, 02:01 PM	#5
fris Too lazy to set a custom title Industry Role: Join Date: Aug 2002 Posts: 55,372	check out mootools http://demos111.mootools.net/ __________________ Since 1999: 69 Adult Industry awards for Best Hosting Company and professional excellence. WP Stuff

08-07-2008, 02:33 PM	#6
Deej I make pixels work Industry Role: Join Date: Jun 2005 Location: I live here... Posts: 24,386	I think i just made a mess in my pants... CSS and JS makes me hard! __________________ Deej's Designs n' What Not Hit me up for Design, CSS & Photo Retouching Icq#30096880

08-07-2008, 02:43 PM	#7
Bird Confirmed User Join Date: Jan 2005 Location: Stockton Posts: 4,365	Try changing the z-layer __________________ ICQ:268731675

08-07-2008, 01:44 PM	#3
BradM Confirmed User Join Date: Dec 2003 Location: 1123,6536,5231 Posts: 3,397	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.

08-07-2008, 02:43 PM	#8
woj <&(©¿©)&> Industry Role: Join Date: Jul 2002 Location: Chicago Posts: 47,882	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... __________________ Custom Software Development, email: woj#at#wojfun#.#com to discuss details or skype: wojl2000 or gchat: wojfun or telegram: wojl2000 Affiliate program tools: Hosted Galleries Manager Banner Manager Video Manager Wordpress Affiliate Plugin Pic/Movie of the Day Fansign Generator Zip Manager

08-07-2008, 03:04 PM	#10
acctman Confirmed User Join Date: Oct 2003 Location: Atlanta Posts: 2,840	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

08-07-2008, 03:31 PM	#11
BigBen Confirmed User Join Date: Nov 2004 Location: scv Posts: 2,299	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.