Thanks! your page works great - I guess I needed to be more specific about how much code I wanted to alter
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Web Developer: Exercise</title>
<style type="text/css">
@import url("css/master.css");
</style>
<!--[if IE]>
<style type="text/css">
@import url("css/ie.css");
</style>
<![endif]-->
<!--[if lt IE 7]>
<style type="text/css">@import url("css/ie6.css");</style>
<![endif]-->
<script type="text/javascript" src="js/contact.js"></script>
<script type="text/javascript">
<!--
function toggle(sel){
// the whole select object is passed when an onchange event occurs
// selectedIndex is the index of the option chosen in the select object
var idx = sel.selectedIndex; // idx is used as shorthand for selectedIndex
// First we loop through all the options and hide the ones not chosen
for( opts = 0; opts < sel.options.length; opts++){
if(sel.options[opts].value != sel.options[idx].value){
// Since your span ids and option values are the same we use
// the non-selected value to create our DOM object via getElementById
hide_span = document.getElementById(sel.options[opts].value);
hide_span.className = "hide"; // we reassign the DOM objects class
}
}
// Now that we hid those that are not to be shown, we can show the span
// that was selected.
var show_span = document.getElementById(sel.options[idx].value);
show_span.className = "show";
}
// -->
</script>
</head>
<body>
<div class="t">
<div class="b">
<div class="l">
<div class="r">
<div class="bl">
<div class="br">
<div class="tl">
<div class="tr">
<div id="contact">
<h2>
Contacts</h2>
<ul id="contactnav" class="cf">
<li><a href="#1">1</a>
<div class="info" id="1">
<dl>
<dd class="img"><img src="img/icon.jpg" alt="" /></dd>
<dd><a href="">bla@bla.com</a></dd>
<dd>555-555-5555</dd>
<dd>info<a href="">map</a></dd>
<dd>info</dd>
<dd><a href="">chats</a> - <a href="">Emails</a></dd>
</dl>
</div>
<div class="toggleable">
<span class="show cf"><a href="">bla@bla.com</a></span>
<span class="hide">555-555-5555</span>
</div>
</li>
<li><a href="#2">2</a>
<div class="info" id="2">
<dl>
<dd class="img"><img src="img/icon.jpg" alt="" /></dd>
<dd><a href="">bla@bla.com</a></dd>
<dd>444-444-4444</dd>
<dd>info <a href="">map</a></dd>
<dd>info</dd>
<dd><a href="">chats</a> - <a href="">Emails</a></dd>
</dl>
</div>
<div class="toggleable">
<span class="show cf"><a href="">bla@bla.com</a></span>
<span class="hide">555-555-5555</span>
</div>
</li>
<li><a href="#3">3</a>
<div class="info" id="3">
<dl>
<dd class="img"><img src="img/icon.jpg" alt="" /></dd>
<dd><a href="">bla@bla.com</a></dd>
<dd>333-333-3333</dd>
<dd>info<a href="">map</a></dd>
<dd>info</dd>
<dd><a href="">chats</a> - <a href="">Emails</a></dd>
</dl>
</div>
<div class="toggleable">
<span class="show cf"><a href="">bla@bla.com</a></span>
<span class="hide">555-555-5555</span>
</div>
</li>
</ul>
<div id="toggle”">
<!-- in my IE7(Vista) w/o a form tag the options were displayed as text
As is the select was not there.
-->
<form action="" name="togglet">
<!-- Call the toggle function when the value of the select box is changed.
Pass this (a reference to the select tag) as the only parameter
-->
<select onchange="toggle(this);" name="toggle">
<option value="email">Email address</option>
<option value="phone">Phone number</option>
</select>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I'm thinking I will need to create some sort of array for both the states possible? is that correct?
| 