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>