JSFiddle - React, Tailwind, and code Playground

by Timmy Willison

HTML

<div class="lblcol">How did you hear about us?</div>
    <div class="fldcol">
      <select name="howhear" size="1" id="howhearsel">
        <option>Web Site</option>
        <option>Other</option>
      </select>
    </div>
    <div class="clear"></div>
    <div id="howhearother">
      <div class="lblcol">Other:</div>
      <div class="fldcol"><input type="text" name="howhearother" size="50"/></div>
    </div>

CSS

.lblcol { float:left; width:190px }
.fldcol { float:left }
.clear { clear:both }
#howhearother { margin-left: 190px; display:inline-block; }
#howhearother .lblcol { float:left; width: 60px }

JavaScript

otherShowHide();
$("#howhearsel").change(otherShowHide);

function otherShowHide(event) {

    var el = $("#howhearsel")
    
    if (el.val().toLowerCase() == "other")
    { // show the "other" text box.
      if (!event) {
        $("#howhearother").show(); // from document.ready, so just show it.
      } else {
        $("#howhearother").slideDown(function() { // slide it down.
          $("#howhearother input").focus(); // this causes it to disappear in IE7.
        });
      }
    } 
    else 
    { // hide the "other" test box.
      if (!event) {
        $("#howhearother").hide(); // from document.ready, so just hide it.
      } else {
        $("#howhearother").slideUp(); // slide it up.
      }
    }

};