How to hide Div in a proper way

Question

In my Asp web application, I have following HTML divs, I need to hide those div by clicking <a> tag.

 function showHide() { var viewProductServiceDiv = document.getElementById("psDiv"); var psbGrid = document.getElementById("psbGrid"); var filterDiv = document.getElementById("filterDiv"); if (viewProductServiceDiv.style.display === "none") { psbGrid.style.display = "none"; filterDiv.style.display = "none"; viewProductServiceDiv.style.display = "block"; } else { psbGrid.style.display = "block"; filterDiv.style.display = "block"; viewProductServiceDiv.style.display = "none"; } } 

 <div class="container-fluid"> <div class="row search-row form-inline" id="filterDiv"> <div class="col-xs-6 text-left"> <a href="#" onclick="showHide(); return false;" style="text-decoration:underline">Show/Hide Divs</a> </div> <div class="col-xs-6 text-right"> </div> </div> <div class="row grid-row"> <div class="col-xs-12"> <div id="psbGrid"> </div> </div> <div class="col-xs-12"> <div id="psDiv"> <button id="backto" class="btn btn-default">Back</button> </div> </div> </div> </div> 

The above code works fine, but looking ugly and I think this is not the good coding practices. Have any possible way to improve this good code. Can I use the JQuery to do this? then how?

And I also need to hide psDiv and show other two divs ( filterDiv , psbGrid ) when clicking the Back button.What is the best way to do this.

simply says, I need to hide filterDiv , psbGrid divs by clicking <a> tag and need show those two divs again when click backbutton and need to hide psDiv div

Answer 1

You can target the next element by finding the closest .row , then toggle a class on the element:

 $('a').click(function(){ $(this).closest('.row').toggleClass('hideContent'); $(this).closest('.row').next().find('#psbGrid').toggleClass('hideContent'); $(this).closest('.row').next().find('#psDiv').toggleClass('hideContent'); }); $('#backto').click(function(){ $(this).closest('.row').prev().toggleClass('hideContent'); $(this).closest('.row').find('#psbGrid').toggleClass('hideContent'); $(this).closest('#psDiv').toggleClass('hideContent'); }); 

 .hideContent{ display: none; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="container-fluid"> <div class="row search-row form-inline" id="filterDiv"> <div class="col-xs-6 text-left"> <a href="#" style="text-decoration:underline">Show/Hide Divs</a> </div> <div class="col-xs-6 text-right"> </div> </div> <div class="row grid-row"> <div class="col-xs-12"> <div id="psbGrid"> psb Grid </div> </div> <div class="col-xs-12"> <div id="psDiv" class="hideContent"> <button id="backto" class="btn btn-default">Back</button> </div> </div> </div> </div> 

Answer 2

You do not need jquery it's working with viewProductServiceDiv.classList.toggle("toggleCls"); method.

<style>
        .toggleCls {
          display:none;
        }

        </style>
        <div class="container-fluid">
                <div class="row search-row form-inline" id="filterDiv">
                    <div class="col-xs-6 text-left">
                      <a href="#"  onclick="showHide();" style="text-decoration:underline">Show/Hide Divs</a>
                    </div>
                    <div class="col-xs-6 text-right">
                    </div>
                </div>
                <div class="row grid-row">
                    <div class="col-xs-12">
                        <div id="psbGrid">
                        </div>
                    </div>
                    <div class="col-xs-12">
                        <div id="psDiv">
                            <button id="backto" class="btn btn-default">Back</button>
                        </div>
                    </div>
                </div>
        </div>
        <script>
        function showHide() {

            var viewProductServiceDiv = document.getElementById("psDiv");
            var psbGrid = document.getElementById("psbGrid");
            var filterDiv = document.getElementById("filterDiv");
            viewProductServiceDiv.classList.toggle("toggleCls");
        }
        </script>

Here is https://jsfiddle.net/ptxdsvwn/7/

Answer 3

The easiest way to do that would be by using jQuery and doing something like this

$('a').click(function(){
    $("#filterDiv, #psbGrid").hide();
});

$('#backto').click(function(){
    $("#filterDiv, #psbGrid").show();
});

Fiddle: https://jsfiddle.net/sarbraj/3ky0xv94/7/

Answer 4

You can use jquery.You need to include jQuery library.

<script type="text/javascript" language="javascript">
function HideDiv() 
{
   $("#filterDiv").hide();
   $("#psbGrid").hide();
   $("#psDiv").show();
}
function ShowDiv()
{
   $("#filterDiv").show();
   $("#psbGrid").show();
   $("#psDiv").hide();
}
</script>

<div class="container-fluid">
  <div class="row search-row form-inline" id="filterDiv">
    <div class="col-xs-6 text-left">
      <a href="#" onclick="HideDiv();" style="text-decoration:underline">Show/Hide 
       Divs</a>
    </div>
    <div class="col-xs-6 text-right">
    </div>
  </div>
  <div class="row grid-row">
    <div class="col-xs-12">
      <div id="psbGrid">
      </div>
    </div>
    <div class="col-xs-12">
      <div id="psDiv" style="display:none">
        <button id="backto" onclick="ShowDiv();"  class="btn btn- 
        default">Back</button>
      </div>
    </div>
  </div>
</div>