GoFuckYourself.com - Adult Webmaster Forum - CSS/JS

- Fucking Around & Business Discussion (https://gfy.com/forumdisplay.php?f=26)

- - CSS/JS - Div show hide (https://gfy.com/showthread.php?t=846479)

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?

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.

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

check out mootools

http://demos111.mootools.net/

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

CSS and JS makes me hard!

Try changing the z-layer

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...

Quote:

Originally Posted by Bird (Post 14578020)

Try changing the z-layer

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

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

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.

Quote:

Originally Posted by harvey (Post 14577743)

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 :thumbsup