Hide or show Elements in HTML Using JavaScript and Css

 Hide or show Elements in HTML Using JavaScript and Css

Steps :-

• For This Firstly create a .hidden class where the css display property is set to "none".

<style>
  .hidden{
    display:none;
  }
</style>

HTML
• Then Using JavaScript we will toggle (add / remove) the hidden class from the element. So that results hiding and showing of the div/any other  element.
• Creating a JavaScript function to hide/show elements.

<script>
  function hideunhide(a){
    document.querySelector(a).classList.toggle('hidden');
  }
</script>

HTML

• This function takes a parameter (queryselector) and select the element and add or remove hidden from the class list of the element. If hidden is present it will remove and vice-versa.That's the work of toggle.
• See the Demo Below or on CXDI - Tutorials :- https://tutorials.sh20raj.repl.co/hide-or-show-elements-in-html-using-javascript-and-css/.
• Demo Codes :- https://replit.com/@SH20RAJ/Tutorials#hide-or-show-elements-in-html-using-javascript-and-css/index.html or on Codepen :- https://codepen.io/SH20RAJ/pen/vYeVdGj?editors=1010

Share this