How to show/hide DOM element using jQuery


With JQuery ( light weight, super Java Script library) we can handle events, dynamically add content to html blocks.

Let’s learn how to show and Hide a div with JQuery

jQuery

jQuery can be placed in a file or with in HTML within <script> </script > , I used to store them as file for easy access. It is a good practice include it in a document ready function, so that we can make sure the query will only execute only when the web page loading completed.

$(function () {
 
}

HTML

In the HTML file very last line of the body (</body>) tag include the script as follows, also you need to include the CDN version or local version of jQuery library.

  <script src="/jquery.js"></script>  -- local version of jQuery library
  <script src="/public/script.js"></script>  -- our script

Show and Hide action

   $("#show-btn").on("click", function () {
 var el=$('#element')
 el.show().fadeIn(1000)
}
  $("#hide-btn").on("click", function () {
 var el=$('#element')
 el.hide().fadeIn(1000)
}

By using the id of the div we access the element and call the show/hide method. We can add cool animation with jQuery too.

Published by

Manoj

A developer,teacher and a blogger obsessed with Python,Dart and open source world from India

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.