show or hide a div using bootstrap and javascript

by Alaksandar Jesus Gene

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
        <div style="background-color: red; font-size: x-large; font-weight: bold; text-align: center"><span>You are registering for Matrimony Meet "Matrimonial Get Together - Pune - 22-Aug-2015"</span></div>

    <form id="form1" runat="server">
        <div class="container">
            <div class="panel">
                <div class="panel panel-default">
                    <div class="panel-heading">
                        <img src="../Images/BJS_Logo-hindi.png" alt="logo" style="height: 71px; width: 161px" />
                        <label class="pull-right" style="font-size: x-large">Register</label>
                    </div>


                    <div class="panel-body">
                        <div class="row">
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="fname">First Name</label>
                                    <input type="text" class="form-control" id="fname" placeholder="First Name" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="mname">Middle Name</label>
                                    <input type="text" class="form-control" id="mname" placeholder="Middle Name" />
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="form-group">
                                    <label for="lname">Last Name</label>
                                    <input type="text" class="form-control" id="lname" placeholder="Last Name" />
                                </div>
                            </div>
                        </div>

                    ...

JavaScript

/*Get the states and city in javascript. Its preferred over for easy Coding.*/
            var states = [{"state":"Maharashtra","cities":["Andheri","Banda"]},{"state":"Andhra Pradesh","cities":["Hydreabad"]},{"state":"Gujrat","cities":["Surat"]}]
            var country = document.getElementById("country");
            var state = document.getElementById("State");
            var city = document.getElementById("city");
            var divOne = document.getElementById("div1");
            var divTwo = document.getElementById("div2");
            var stateslength = states.length;
            
/*Initialize the document */
            (function(){
                country.checked = false;
                divOne.style.display="none";
                var stateoptions = "<option value='' selected>Select a state</option>";
                for(var i=0; i< stateslength;i++){
                  stateoptions =stateoptions+'<option value="'+states[i].state+'">'+states[i].state+'</option>';
                };
                state.innerHTML=stateoptions;
            }());
            
            function toggleCountry(){
                if(country.checked){
                    divOne.style.display="block";
                    divTwo.style.display="none";         
                }
                else{
                    divOne.style.display="none";
                    divTwo.style.display="block";
                    
                }   
            };
            
            function getCity(){
                                
                for (i = city.length; i >=0; i--) {
                        city.remove(i);
                    }
                
                var cityoptions = "<option value='' selected>Select a City</option>";
                for(var i = 0; i < stateslength; i++){
                    
                        if(states[i].state == state.value){
                                var totalCities = states[i].cities.length;
                          ...