JSFiddle - React, Tailwind, and code Playground

by Otobong Okoko

HTML

<select class="default" id="security_question_1" name="security_question_1">
        <option value="" selected>Select question...</option>
        <option value="1">Question One</option>
        <option value="2">Question Two</option>
        <option value="3">Question Three</option>
        <option value="4">Question Four</option>
        <option value="5">Question Five</option>
        <option value="6">Question Six</option> 
    </select>
<div id="showMe">
  <div class="row">
    <div class="col-md-6">
      <div class="form-group g-mb-20">
        <!--<input class="form-control g-brd-gray-light-v5 g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-px-10 g-py-12" aria-label="Address" type="text" name="callupno" placeholder="NYSC Call-Up Number" required>-->
        <label for="interest">Your Current State
                                                    <select class="form-control g-brd-gray-light-v5 g-bg-gray-light-v5 g-bg-gray-light-v5--focus g-px-10 g-py-12" aria-label="Address">
                                                        <option value="" selected>Select a State</option>
                                                        <option value="1">Abia</option>
                                                        <option value="2">Abuja</option>
                                                        <option value="3">Adamawa</option>
                                                        <option value="4">Akwa Ibom</option>
                                                        <option value="5">Anambra</option>
                                                        <option value="6">Bauchi</option>
                                                        <option value="7">Bayelsa</option>
                                                        <option value="8">Benue</option>
                                                        <option value="9">Borno</option>
                                                        <option value="10">Cross...

CSS

#showMe {
  display: none;
}

JavaScript

var elem = document.getElementById("security_question_1");
elem.onchange = function() {
  var hiddenDiv = document.getElementById("showMe");
  hiddenDiv.style.display = (this.value == "") ? "none" : "block";
};