...

View Full Version : hide show script



taas
09-05-2008, 05:53 PM
I have been searching on this forum and others for a hide/show script that will behave like the one on this page.

http://www.gty.org/Resources/Articles/4833

I'm new to javascript so I'm really not sure what I'm looking for. Any help would be greatly appreciated.

Thanks

ess
09-05-2008, 09:47 PM
here is a simple example.

not perfect, but will help you in your quest


<html>
<head>
<title>Hide and show script</title>
<style type="text/css">
html, body{
background-color: #ccc;
border:0;
margin:0;
padding:0;
}

table {
border: 0;

border-spacing: 0;
text-align:left;
background-color: #fff;
}
table td {

}
table td#left {
width: 150px;
vertical-align:top;
padding: 10px;
background-color: lightyellow;

}
table td#left ul {
list-style: none;
margin: 0;
padding: 0;
}
table td#pane {
width: 20px;
text-align:center;
vertical-align:top;
background-color: lightblue;
}
table td#right {
width: 600px;
vertical-align:top;
padding: 10px;
}
table td#right p {
text-align:justify;
}
</style>
<script type="text/javascript">
function hide_show() {
var left = window.document.getElementById("left");
var right = window.document.getElementById("right");
var pane = window.document.getElementById("pane");
if (left.style.display != 'none') {
left.style.display = 'none';
pane.innerHTML = "S<br />H<br />O<br />W";
} else {
left.style.display = 'block';
pane.innerHTML = "H<br />I<br />D<br />E";
}
} //-- ends hide_show
</script>
</head>
<body>
<div style="width: 900px;">
<table>
<tr>
<td id="left">
<ul>
<li>Hide and show</li>
<li>Hide and show</li>
<li>Hide and show</li>
<li>Hide and show</li>
</ul>
</td>
<td id="pane" onclick="javascript: hide_show();">
H<br />I<br />D<br />E
</td>
<td id="right">
<h1>Lorem Ipsum</h1>
<p>
Lorem Ipsum is simply dummy text of the printing and typesetting industry.
Lorem Ipsum has been the industry's standard dummy text ever since the 1500s,
when an unknown printer took a galley of type and scrambled it to make a type
specimen book. It has survived not only five centuries, but also the leap into
electronic typesetting, remaining essentially unchanged. It was popularised in
the 1960s with the release of Letraset sheets containing Lorem Ipsum passages,
and more recently with desktop publishing software like Aldus PageMaker including
versions of Lorem Ipsum.
</p>
</td>
</tr>
</table>
</div>
</body>
</html>

cheers

~E

taas
09-06-2008, 04:58 AM
thanks, I will give it a try and let you know how it works out.

rangana
09-06-2008, 06:15 AM
You might also want to make a slight movement on it:


<style type="text/css">
#container{padding:10px;border:3px double #999;width:800px;height:110px;}
#left{width:150px;float:left;}
#right{float:right;width:555px;}
#trig{float:left;height:100px;border:1px solid #222;margin:0px;
text-align:center;cursor:pointer;padding:0px 5px;
border-right:2px solid #999;
}
</style>
<script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.2.6.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#trig').click(function(){
if(this.firstChild.nodeValue!='Show'){
this.firstChild.nodeValue='Show';
$('#right').animate({width:'705px'},1000);}
else{
this.firstChild.nodeValue='Hide';
$('#right').animate({width:'555px'},1000);}

$('#left').animate({width:'toggle',opacity:'toggle'},1000);
});});
</script>
<div id="container">
<div id="left">
This is the left content
</div>
<p id="trig">Hide</p>
<div id="right">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Proin massa. Nam vehicula.
Morbi velit nisi, mollis id, ultrices luctus, adipiscing sit amet, lectus. Nunc rhoncus
nisl ac enim. Maecenas vestibulum dolor ut velit. Maecenas condimentum pulvinar purus.
Pellentesque ac ipsum. Curabitur sodales, elit vel molestie hendrerit, elit odio rhoncus tellus,
nec gravida enim urna id velit. Donec nec tellus. Vestibulum nulla. Curabitur enim.
</div>
</div>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum