CODEWITHSUNDEEP
javascript
James Hollomon
James Hollomon

Reputation: 19

Need to Toggle DIV Visibility for 2 DIVs

I need show a DIV full of dimensions and weights in English measure, and have a link allowing the user to toggle to a hidden DIV that instead displays Metric. Trying the markup below, but it's not working. It refuses to toggle. I've tested with the first div given no style and with its style'"display: block;" and neither works. What am I missing?

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script type="text/javascript">
    function toggle_visibility(eng, met) {
        var e1 = document.getElementById(eng);
        var e2 = document.getElementById(met);
        if(e1.style.display == 'block')
            e1.style.display = 'none';
            e2.style.display = 'block';
        else
            e1.style.display = 'block';
            e2.style.display = 'none';
    }
    </script>
  </head>
  <body>
    <div id="eng" style="display: block;">
      This is English<br />
      <a href="#" onclick="toggle_visibility('eng','met');">Convert to Metric</a>
    </div>
    <div id="met" style="display: none;">
      This is Metric<br />
      <a href="#" onclick="toggle_visibility('met','eng');">Convert to English</a>
    </div>
  </body>
</html>

Upvotes: 0

Views: 92

Answers (2)

James Hollomon
James Hollomon

Reputation: 19

Got it working. I thought I'd post the solution:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">

    <style type="text/css">
    <!--
    body {
      color:#000000;
      background-color:#FFFFFF;
    }
    a  { color:#0000FF; }
    a:visited { color:#800080; }
    a:hover { color:#008000; }
    a:active { color:#FF0000; }
    -->
    </style>
    <!--[if IE]>
    <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->

    <script type="text/javascript">
    function toggle_visibility() {
      var e1 = document.getElementById("eng");
      var e2 = document.getElementById("met");
      if(e1.style.display == 'block') {
        e1.style.display = 'none';
        e2.style.display = 'block';
      }
      else {
        e1.style.display = 'block';
        e2.style.display = 'none';
      } 
    }
    </script>
  </head>
  <body>
    <div id="eng" style="display: block;">
      This is English<br />
      <a href="#" onclick="toggle_visibility();">Convert to Metric</a>
    </div>
    <div id="met" style="display: none;">
      This is Metric<br />
      <a href="#" onclick="toggle_visibility();">Convert to English</a>
    </div>
  </body>
</html>

Upvotes: 0

D.Bugger
D.Bugger

Reputation: 2359

Try this if-statement:

    if(e1.style.display == 'block') {
        e1.style.display = 'none';
        e2.style.display = 'block';
    } else {
        e1.style.display = 'block';
        e2.style.display = 'none';
    }

Upvotes: 2

Related Questions