Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Chris Miller on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Div Expand 1

Status
Not open for further replies.
zbphill

zbphill

Technical User
Jan 30, 2007
40
US
The code below expands and shrinks when you click the hyperlinks,
and if you expand one the other div shirinks.
But now I want to show the div for MENU1 when you open the page and if you click on MENU2, MENU3, ext. that div expands and the MENU1 shrinks



<style type="text/css">

.menu1{
display:block;
}
.submenu{
display: block;
}

.hide{
display: none;
}
.show{
display: block;
}
</style>
<script>

var last_expanded = '';

function showHide(id)
{
var obj = document.getElementById(id);

var status = obj.className;

if (status == 'hide') {

if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}

obj.className = 'show';

last_expanded = id;
} else {
obj.className = 'hide';
}
}
 
Sort by date Sort by votes
I can't tell much without seeing your HTML, but for starters it looks like you should use MENU1, MENU2, MENU3 for IDs instead of classnames.

<.
 
Upvote 0 Downvote
Here is the full html



<html xmlns="
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="generator" content="Adobe GoLive" />
<title>test</title>
<style type="text/css">

.hide{
display: none;
}
.show{
display: block;
}
</style>
<script>

var last_expanded = '';

function showHide(id)
{
var obj = document.getElementById(id);

var status = obj.className;

if (status == 'hide') {

if (last_expanded != '') {
var last_obj = document.getElementById(last_expanded);
last_obj.className = 'hide';
}

obj.className = 'show';

last_expanded = id;
} else {
obj.className = 'hide';
}
}


</script>


</head>

<body>
<table width="359" border="1" cellspacing="2" cellpadding="0">
<tr>
<td><a href="javascript:;" onclick="showHide('mymenu1')">Menu 1</a></td>
</tr>
<tr>
<td>
<div id="mymenu1" class="hide">
<a href="#" >Link One here</a>


</div>
</td>
</tr>
<tr>
<td><a href="javascript:;" onclick="showHide('mymenu2')">Menu 2 </a></td>
</tr>
<tr>
<td>
<div id="mymenu2" class="hide">
<a href="#" >Link One here<br />
</a></div>
</td>
</tr>
<tr>
<td><a href="javascript:;" onclick="showHide('mymenu3')">Menu 3 </a></td>
</tr>
<tr>
<td>
<div id="mymenu3" class="hide">
<a href="#" class="submenu">Link One here</a>


</div>
</td>
</tr>
<tr>
<td><a href="javascript:;" onclick="showHide('mymenu4')">Menu 4 </a></td>
</tr>
<tr>
<td>
<div id="mymenu4" class="hide">
<a href="#" class="submenu">Link One here</a>


</div>
</td>
</tr>
<tr>
<td><a href="javascript:;" onclick="showHide('mymenu5')">Menu 5 </a></td>
</tr>
<tr>
<td>
<div id="mymenu5" class="hide">
<a href="#" class="submenu">Link One here</a>


</div>
</td>
</tr>
</table>
</body>

</html>
 
Upvote 0 Downvote
You almost have it, all you need to do is the following:

Set lastExpanded to 'mymenu1' (initial value)
Code: 
var last_expanded = 'mymenu1';

Change the class name of the div mymenu1 to 'show'
Code: 
<div id="mymenu1" class="show">

That should do it.




<.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

JScannell
  • Locked
  • Question
Programmatically inserting a newline in a &lt;textarea&gt;, &lt;span&gt;, or &lt;div&gt;
Replies
5
Views
1K
ggriffit
ggriffit
malibu65k
  • Locked
  • Question
Hide/Unhide div using Radio button onClick
Replies
4
Views
136
malibu65k
malibu65k
bluemask11
  • Locked
  • Question
jQuery hide div class if total equal to 0
2
Replies
23
Views
313
bluemask11
bluemask11
GRIFFIJ
  • Locked
  • Question
Centre a div
Replies
5
Views
96
vacunita
vacunita
BobMCT
  • Locked
  • Question
Using js to modify html div with message (help?)
Replies
6
Views
124
vacunita
vacunita

Part and Inventory Search

Sponsor

Back
Top