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.
- How to add data on MongoDB using Node-Express API - How to use Nodejs-Express API to perform CURD operations on MongoDB
- POST API Call using jQuery and AJAX - How to make a POST API call in HTML/web app using jQuery and AJAX
- GET API Call using jQuery and AJAX - How to make a get API call in HTML/web app using jQuery and AJAX
- How to create animated tool tip container with CSS and jQuery - How to add a custom animated tool tip functionality using CSS and jQuery
- How to add/remove CSS class using jQuery - How to add and remove visual appearance (CSS) to container using jQuery
- How to show/hide DOM element using jQuery - How to show and hide a div with jQuery.
- How to redirect a page in jQuery - How to redirect a web page in jQuery
- How to load content into div using jQuery - How to add content to a div in HTML page using jQuery
- How to refresh / reload content to a div using jQuery - How to load/refresh content every 5 second using JQuery in HTML / web page
