How to use Hide and Show Function using jQuery

How to use Hide and Show Function using jQuery

in this article, you will learn How to use Hide and Show Function using jQuery. Using hide or show function you can hide or show any content in HTML document. Example:- <html> <head> <title>Hide Show Function</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("p").hide(); }); $("#show").click(function(){ $("p").show(); }); }); </script> </head> <body> <p>If click on the "Hide" button, it […]
Read Full Article
How to Create a start and stop Function using jQuery

How to Create a start and stop Function using jQuery

In this article, we will explain How to Create a start and stop Function using jQuery. Example:- <html> <head> <title>start() and stop() Function using jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#start").click(function(){ $("#panel").slideDown(5000); }); $("#stop").click(function(){ $("#panel").stop(); }); }); </script> <style> #panel, #flip { padding: 5px; font-size: 18px; text-align: center; background-color: Red; color: white; border: solid 1px #666; border-radius: 3px; […]
Read Full Article
How to Add New HTML Content using jQuery

How to Add New HTML Content using jQuery

In this article, you will learn How to Add New HTML Content using jQuery. Four jQuery Methods for add new content. append() prepend() after() before() jQuery append() method <html> <head> <title>jQuery append() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#btn1").click(function(){ $("p").append(" <b>Appended text</b>."); }); $("#btn2").click(function(){ $("ol").append("<li>Appended item</li>"); }); }); </script> </head> <body> <p>paragraph.</p> <p>another paragraph.</p> <ol> <li>item 1</li> <li>item 2</li> <li>item […]
Read Full Article
How to Create jQuery CSS() Method

How to Create jQuery CSS Method

In this article, you will learn How to Create jQuery CSS Method. CSS is a cascading stylesheet so we will explain How to Create jQuery CSS() Method. Example:- <html> <head> <title>jQuery css() Method</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("button").click(function(){ $("p").css({"background-color": "yellow", "font-size": "200%"}); }); }); </script> </head> <body> <p style="background-color:#ffb100">Welcome to </p> <p style="background-color:#00ff00">Hub of Tutorials</p> <p […]
Read Full Article