JQuery Code for Hiding Paragraph
JQUERY Sample Codes

JQuery Code for Hiding Paragraph

JQuery code for hiding paragraph can be implemented in a simple way. JQuery library is a single JavaScript file, and you can reference it with the HTML <script> tag. But the <script> tag should be inside the <head> section as shown below.

<head>
<script src="jquery-3.3.1.min.js"></script>
</head> 

This tutorial helps you to implement JQuery code to hide paragraph.

JQuery Code for Hiding Paragraph

 

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

 

Create a file named Jquerytest3.php and save it in the root folder of PHP. Download JQuery library from the site and rename this library file to jquery-3-2-1.js (downloaded file should be saved with .js extension).

Make sure that both jquery-3-2-1.js and Jquerytest3.php file should be stored in the same folder. Another way of using the JQuery library without downloading is to use Google CDN or Microsoft CDN. JQuery code for hiding paragraph is as shown below.

Jquerytest3.php

<!DOCTYPE html>

<html>

<head>

<script src="jquery-3-2-1.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>JQuery Code For Hiding Paragraph</h2>

</br></br></br>

</br></br></br>

<p>JQuery Code For Hiding Paragraph 1: JQuery code for hiding paragraph can be implemented in a simple way .</p>

</br></br></br>

</br></br></br>

<p>JQuery Code For Hiding Paragraph 2: JQuery code for hiding paragraph can be implemented in a simple way .</p>

<button>Click Here to Hide Paragraph</button>

</body>

</html>

Try this JQuery code using Google CDN

Jquerytest3.php

 

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>JQuery Code For Hiding Paragraph</h2>

</br></br></br>

</br></br></br>

<p>JQuery Code For Hiding Paragraph 1: JQuery code for hiding paragraph can be implemented in a simple way .</p>

</br></br></br>

</br></br></br>

<p>JQuery Code For Hiding Paragraph 2: JQuery code for hiding paragraph can be implemented in a simple way .</p>

<button>Click Here to Hide Paragraph</button>

</body>

</html>

Try this JQuerycode using Microsoft CDN

Jquerytest3.php

 

<!DOCTYPE html>

<html>

<head>

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script>

<script>

$(document).ready(function(){

$("button").click(function(){

$("p").hide();

});

});

</script>

</head>

<body>

<h2>JQuery Code For Hiding Paragraph</h2>

</br></br></br>

</br></br></br>

<p>JQuery Code For Hiding Paragraph 1: JQuery code for hiding paragraph can be implemented in a simple way .</p>

</br></br></br>

</br></br></br>

<p>JQuery Code For Hiding Paragraph 2: JQuery code for hiding paragraph can be implemented in a simple way .</p>

<button>Click Here to Hide Paragraph</button>

</body>

</html>

Output :

Execute Jquerytest3.php code by typing localhost/jquery/Jquerytest3.php in your browser. Here I have created a folder named “jquery”in the root directory of PHP.

I have stored Jquerytest3.php file in the ‘jquery’ folder already created. That is why I have typed localhost/jquery/Jquerytest3.php in the browser for running the code. When you load the file Jquerytest3.php, the page looks like

JQuery Code for Hiding Paragraph
                                                                         Home Page 

Tap on the button named “Click Here to Hide Paragraph” for hiding the paragraph.

Tap on the button named “Click Here to Hide Paragraph” for hiding the paragraph.
                                                                 Paragraph Hidden

 

One Reply to “JQuery Code for Hiding Paragraph

Leave a Reply

Your email address will not be published. Required fields are marked *