PDA

View Full Version : CSS + Javascript show/hide DIV layers


hgfl
July 20th, 2005, 01:08 AM
http://www.dyn-web.com/dhtml/scroll/scroll-rel.html
The above resource is very cool -- you can download the source code here: http://www.dyn-web.com/dhtml/scroll/

BUT... I was wondering if anyone knew of another resource that does the show/hide content thing in the same way, but instead of displaying it in a scrollable area, I'm after a simpler interface that just expands to fit the loaded content.

I have tried to modify this code to do what I want, but haven't had much success (I'm not at all good when it comes to JavaScript). So any help/suggestions would be very much appreciated.

Thanx
Lacuna
July 20th, 2005, 08:57 AM
My code is too pilled full with stuff to let you use as a guideline, but here's a link to a tutorial.

http://www.dynamicdrive.com/dynamicindex17/tabcontent.htm

~ Lacuna :love:
hgfl
July 21st, 2005, 06:28 PM
Thanks for that...but;

The way this one works is it loads external files into the one area. I was looking more at having all content in 1 page, in separate DIVs, and then have the buttons controlling which of the DIVs are shown, and which ones are hidden, otherwise, if I were wanting each piece of content in a separate page, I would have just used iframes.

Thanks again for your help nonetheless. Does anyone know where I can find what I'm after?
adman_9000
July 21st, 2005, 06:46 PM
so you just want a few buttons which call a javascript function which basically hides all the divs except the one related to the button? something like:
<a href="#" onClick="showDiv('div1');">show div 1</a>
then a showDiv function which sets all divs visibility=hidden and the passed divs visibility=visible.
if so I can show you example code if u like..
hgfl
July 21st, 2005, 07:17 PM
Yeah, that would be very much appreciated!

I'm guessing it would be something like this: http://www.dynamicdrive.com/dynamicindex17/comboviewer.htm

except instead of using a combo box to select the content, a regular html menu would be used.
hgfl
July 21st, 2005, 08:37 PM
It's okay, I've found what I'm after.

Thanx to those who helped!
simplistik
July 22nd, 2005, 09:29 AM
It's okay, I've found what I'm after.

Thanx to those who helped!Just to help other ppl that may look for the same thing... post the script that u used as a solution.
hgfl
July 25th, 2005, 01:48 AM
no problem:


<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
<script type="text/javascript">
var currentshown=1;
function showDiv(thediv){
document.getElementById('div'+currentshown).style. display='none';
document.getElementById('div'+thediv).style.displa y='block';
currentshown=thediv;
}
</script>
<style type="text/css">
.divs{
display:none;
width:300px;
}
#div1{
display:block;
}
#div2{
}
#div3{
}
</style>
</head>
<body>
<p><a href="javascript:;" onclick="showDiv(1);return false;">Display Div 1</a> ||
<a href="javascript:;" onclick="showDiv(2);return false;">Display Div 2</a> ||
<a href="javascript:;" onclick="showDiv(3);return false;">Display Div 3</a></p>
<div id="div1" class="divs">Div1</div>
<div id="div2" class="divs">Div2 </div>
<div id="div3" class="divs">Div3</div>
</body>
</html>