title: Can I make one row show at a time in a table?
body: <p>I have a javascript function that toggles the display for rows in a table.  The dilemma is that I would like to display one row at a time.  What is a neat way to do this?</p>
  
  <pre><code>    function optionSelected() {
          var optionSelect = document.getElementById('ddlSelect');
          var strTest = optionSelect.options[optionSelect.selectedIndex].value;            
          var rowHeader = document.getElementById(strTest);
          var row = document.getElementById(strTest);
  
          if (rowHeader.style.display == '') {
              rowHeader.style.display = 'none';
              row.style.display = 'none';
          }
          else {
              rowHeader.style.display = '';
              row.style.display = '';
          }
      }  
  
  
  &lt;select id="ddlSelect" onchange="optionSelected()"&gt;
      &lt;option value="optionA"&gt;A&lt;/option&gt;
      &lt;option value="optionB"&gt;B&lt;/option&gt;
      &lt;option value="optionC"&gt;C&lt;/option&gt;
      &lt;option value="optionD"&gt;D&lt;/option&gt;
  &lt;/select&gt;
  
  &lt;table id="tableList"&gt;
      &lt;tr id="optionA"&gt;&lt;td&gt;DisplayA&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="optionB"&gt;&lt;td&gt;DisplayB&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="optionC"&gt;&lt;td&gt;DisplayC&lt;/td&gt;&lt;/tr&gt;
      &lt;tr id="optionD"&gt;&lt;td&gt;DisplayD&lt;/td&gt;&lt;/tr&gt;
  &lt;/table&gt;
  </code></pre>