how do I hide certain part of form

Question

I have a form and it contains dropdown box and different div items. Based on selection from dropdown box, I show those div items. But some of the text in those div items are shown when the form is loaded and not when I select the option from dropdown box. The code is somewhat like this

<form>
      <select id="">
          <option value="one"> One </option>
          <option value="two"> Two </option>
          <option value="three"> Three </option>
      </select>
      <div id="onee"> header text ..<table> </table></div>
      <div id="twoo"> header text ..<table> </table></div>

</form>

So when I load the page form with select drop down box is shown , but it also shows header text which is within div. How do I hide that text?

Answer 1

You can start those divs at display:none.

Answer 2

 <div id="onee" style="display:none"> header text ..<table> </table></div>
      <div id="twoo" style="display:none"> header text ..<table> </table></div>

so your full code on page load is

<form>
      <select id="">
          <option value="one"> One </option>
          <option value="two"> Two </option>
          <option value="three"> Three </option>
      </select>
      <div id="onee" style="display:none"> header text ..<table> </table></div>
      <div id="twoo" style="display:none"> header text ..<table> </table></div>

</form>

after this when you change option in select box

just replace display:none with display:block

Answer 3

If you are using JavaScript to show divs based on selection, you can as well hide all the divs initially. Here is how to do it in JQuery:

$("#onee").hide();
$("#twoo").hide();

Or you can just hide them with CSS: diplay:none.

If you use postbacks in your drop-down, you can control html output on the server side and only render divs you need.