Breaking News: Grepper is joining You.com. Read the official announcement!

Html show and hide div

Xfantasia answered on July 7, 2021 Popularity 10/10 Helpfulness 4/10

answer Html show and hide div

related hide and show div using javascript with example

Html show and hide div

Comment

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>

Popularity 10/10 Helpfulness 4/10 Language html

Source: Grepper

Tags: hide html show

Link to this answer
Share Copy Link

Contributed on Jul 17 2022

Xfantasia

0 Answers Avg Quality 2/10

Closely Related Answers

hide and show div using javascript with example

Comment

hide and show divs using javascript

Popularity 10/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: hide

Link to this answer
Share Copy Link

Contributed on Jul 07 2021

Blue-eyed Bison

0 Answers Avg Quality 2/10

Html show and hide div

Contents

More Related Answers

Html show and hide div

Closely Related Answers

hide and show div using javascript with example

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.