JavaScript Forum

**MellowD** · 05-06-2009, 09:01 PM

I'm building a site where the links open up div boxes so the user doesn't actually have leave the page when clicking the link. I figured out how to open a div when clicking a link but need to figure out how to close any open div's when clicking a new link (so there aren't a bunch of div boxes open). I tried searching but haven't found much info. Any help would be greatly appreciated. Here is the code below.

<a href="#" onclick="document.getElementById('moreinfo').style .display = 'block';">Link Goes Here</a>

<div><script type="text/javascript">
</script>Content Going Here<script type="text/javascript"></script></div>

**JeremyMiller** · 05-06-2009, 09:22 PM

This method uses javascript with CSS class names. Hopefully it helps you to figure out your particular page.

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <script type="text/javascript">
    var toggle_divs_prefix = 'div_'; //The prefix of id values for controlled divs
      function toggleDivs(active_div) {
        var page_divs = document.getElementsByTagName('div');
        if (page_divs.length > 0) {
          for (var i=0;i < page_divs.length;i++) {
            page_divs[i].className = page_divs[i].className.replace(/dynamic\_div\_visible/,"dynamic_div_hidden");
          }
          document.getElementById(toggle_divs_prefix + active_div).className = document.getElementById(toggle_divs_prefix + active_div).className.replace(/dynamic\_div\_hidden/,"dynamic_div_visible");
        }
      }
    </script>
    <style>
      .dynamic_div_visible {
      }
      .dynamic_div_hidden {
        display:none;
      }
      .featured {
        border:3px #000099 inset;
      }
    </style>
  </head>
  <body>
    <a href="javascript:toggleDivs(1);">Show Div 1</a>
    <a href="javascript:toggleDivs(2);">Show Div 2</a>
    <a href="javascript:toggleDivs(3);">Show Div 3</a>
    <div id="div_1" class="dynamic_div_visible">
      <h1>Div 1</h1>
    </div>
    <div id="div_2" class="featured dynamic_div_hidden">
      <h1>Div 2</h1>
    </div>
    <div id="div_3" class="dynamic_div_hidden">
      <h1>Div 3</h1>
    </div>
  </body>
</html>

**MellowD** · 05-07-2009, 01:30 AM

Wow, Thanks so much Jeremy! Exactly what I was looking for. Thanks!!!