flipping between headlines.....

dreamclutch · May 30, 2006

I'd like to flip between 2 headlines (in this example logos and templates) by using two div's. When one appears, the other dissapears...vice versa. This is what I have so far but it shows both content areas.

- Justin

<script type="text/javascript">

</script>

<a href="#" onClick="makeVisible('section2')">Logos</a> | <a href="#" onClick="makeVisible('section1')">Templates</a>

<div id="section2" style="visibility:hidden">
Section 1 text here
</div>

<div id="section1" style="visibility:hidden">
Section 2 text here
</div>

<br>

theniteowl · May 30, 2006

This is a simplistic demo but try it this way.

Code:

<html>
<head>
<title></title>
<script type="text/javascript">
<!--//
function swapVisible(id) {
  if (id == 'section1') {
    document.getElementById('section1').style.display = "block";
    document.getElementById('section2').style.display = "none";
  }
  else {
    document.getElementById('section2').style.display = "block";
    document.getElementById('section1').style.display = "none";
  }
}
//-->
</script>
</head>
<body>
<a href="#" onClick="swapVisible('section2')">Logos</a> | <a href="#" onClick="swapVisible('section1')">Templates</a>
<div id="section2" style="display:none">
    Section 1 text here
</div>
<div id="section1" style="display:none">
    Section 2 text here
</div>
<br>
</body>
</html>

Using display rather than visibility keeps the non-displayed div from taking up space on the screen.

It's hard to think outside the box when I'm trapped in a cubicle.

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!

flipping between headlines.....

dreamclutch

Programmer

theniteowl

Programmer

Similar threads

Part and Inventory Search

Sponsor