CODE EXAMPLE FOR JAVASCRIPT

Html show and hide div

METHOD 1
=================
function myFunction() {
  var x = document.getElementById("myDIV");
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}




METHOD 2
=================


<!--SELECT ELEMENT-->
<div class="form-group row">
    <label class="col-md-3 label-control" for="projectinput1"> <b>Group Type</b></label>
    <div class="col-md-4 mx-left">
        <select id="projectinput7" name="period1" class="form-control round" required="" onchange="select_group(this.value)">
            <option value="" selected="">- Select Group Type -</option>
            <option value="GROUP-SAVINGS">Cooperative Group Savings</option>
            <option value="GROUP-LOANS">Cooperative Group Loans</option>
        </select>
    </div>
</div>



<style>
    .showx{
        visibility: visible;
        display: block;
    }
    .hidex{
        visibility: hidden;
        display: none;
    }
</style>



<script>

    function select_group(group_type){

        var group_type;

        //alert(group_type);

        //GROUP SAVINGS
        if(group_type == 'GROUP-SAVINGS')
        {
            //show
            document.getElementById("payment_period").style.visibility = "visible";
            document.getElementById("payment_period").setAttribute("style", "showx");

            //hide
            document.getElementById("tenor").style.display = "none";
            document.getElementById("optional_info").style.display = "none";
        }

        //GROUP LOANS 
        if(group_type == 'GROUP-LOANS')
        {
            //show
            document.getElementById("payment_period").style.display = "none";
            document.getElementById("amount_payable").style.display = "none";
            document.getElementById("optional_info").setAttribute("style", "hidex");
            
            //hide
            document.getElementById("tenor").setAttribute("style", "showx");
            document.getElementById("optional_info").setAttribute("style", "showx");
        }
    }

</script>