D3 Examples - D3 button that shows and hides text in a div

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    #text1.hidden {
      display: none;
    }
   #text2.hidden {
     display: none;
    }
    #text3.hidden {
      display: none;
    }
  </style>
</head>
​
<body>
  
    <button id="showhide" onclick()>Click me</button>
  <div id="text1" class="hidden">Text 1</div>
  <div id="text2" class="hidden">Text 2</div>
  <div id="text3" class="hidden">Text 3</div>
    
  <script type="text/javascript"> 
        
        var w = 300, h = 300;
        
        var color = 1;
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h); 
     
        d3.select("#showhide").on("click", function(){
                
            color = color + 1;
                
            if (color % 2) 
                {
                    d3.select(this).text("Click me");
          d3.select("#text1").classed("hidden", true);
          d3.select("#text2").classed("hidden", true);
          d3.select("#text3").classed("hidden", true);
                    //Add other code below here
                } 
            else 
                {
                    d3.select(this).text("Reset");
         d3.select("#text1").classed("hidden", false);
          d3.select("#text2").classed("hidden", false);
          d3.select("#text3").classed("hidden", false);
                    //Add other code below here 
                }
            });
         </script>
</body>
​
    