JQuery code for Hiding and Showing a Paragraph
JQUERY Sample Codes

jQuery Sample code for hiding and showing a paragraph based on click event.

The 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 jQuery tutorial for beginners is a step by step guide on for hiding and showing a paragraph based on click event.

JQuery code for Hiding and Showing a Paragraph

Jquerytest2.php

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function()

{

    $("p1").click(function()

            {

        $("p").hide();

              });

            $("p2").click(function()

            {

        $("p").show();

             });

});

</script>

</head>

<body>

<p>Paragraph 1:jQuery is a  JavaScript library created by John Resig in 2006. The purpose of jQuery is to make it much easier to use JavaScript on your website. That is, the usage of jQuery is to  simplifies HTML document traversing, Make your JavaScript code shorter, faster and cross browser, handles  events, adding effects to the html elements easily, manipulate your html elements (like showing or hiding something from the page) etc. jQuery's syntax is designed to make it easier to write complicated JavaScript code in a simple way. Since jQuery is free and open source, it is the most popular JavaScript library in use today.  </p>

<br>

<br><br><br><br><br><br><br><br>

<p1>Paragraclick 2:click here to hide the paragraph 1</p1>

<br>

<br><br><br><br><br><br><br><br>

<p2>Paragraclick 3: click here to show the paragraph 1  </p2>

<br>

<br><br><br><br><br><br><br><br>

</body>

</html>

 

Save the above file Jquerytest2.php file in the root directory of PHP. Before load the Jquerytest2.php file in the browser you should download the JQuery library from the site and rename it as shown in the attribute of script tag  src=”jquery-3-2-1.js” (please ensure that when you download the file,file should be saved with .js extension). The JQuery library file should be kept in the same folder where the Jquerytest.php file stored.

Sample code for Hiding

This the code for hiding the paragraph

    $("p1").click(function()

            {

        $("p").hide();

              });

Sample code for Showing

This the code for showing the paragraph

$("p2").click(function()

            {

        $("p").show();

             });

The other way of referring the JQuery library online is using CDN (Content Delivery Network) of Google or Microsoft. If you want to refer the CDN online, follow either of the script tag shown below.

Try this code :

Jquerytest2.php

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function()

{

    $("p1").click(function()

            {

        $("p").hide();

              });

            $("p2").click(function()

            {

        $("p").show();

             });

});

</script>

</head>

<body>

<p>Paragraph 1:jQuery is a  JavaScript library created by John Resig in 2006. The purpose of jQuery is to make it much easier to use JavaScript on your website. That is, the usage of jQuery is to  simplifies HTML document traversing, Make your JavaScript code shorter, faster and cross browser, handles  events, adding effects to the html elements easily, manipulate your html elements (like showing or hiding something from the page) etc. jQuery's syntax is designed to make it easier to write complicated JavaScript code in a simple way. Since jQuery is free and open source, it is the most popular JavaScript library in use today.  </p>

<br>

<br><br><br><br><br><br><br><br>

<p1>Paragraclick 2:click here to hide the paragraph 1</p1>

<br>

<br><br><br><br><br><br><br><br>

<p2>Paragraclick 3: click here to show the paragraph 1  </p2>

<br>

<br><br><br><br><br><br><br><br>

</body>

</html>

 

OR try this code

 

Jquerytest2.php

<!DOCTYPE html>

<html>

<head>

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

<script>

$(document).ready(function()

{

    $("p1").click(function()

            {

        $("p").hide();

              });

            $("p2").click(function()

            {

        $("p").show();

             });

});

</script>

</head>

<body>

<p>Paragraph 1:jQuery is a  JavaScript library created by John Resig in 2006. The purpose of jQuery is to make it much easier to use JavaScript on your website. That is, the usage of jQuery is to  simplifies HTML document traversing, Make your JavaScript code shorter, faster and cross browser, handles  events, adding effects to the html elements easily, manipulate your html elements (like showing or hiding something from the page) etc. jQuery's syntax is designed to make it easier to write complicated JavaScript code in a simple way. Since jQuery is free and open source, it is the most popular JavaScript library in use today.  </p>

<br>

<br><br><br><br><br><br><br><br>

<p1>Paragraclick 2:click here to hide the paragraph 1</p1>

<br>

<br><br><br><br><br><br><br><br>

<p2>Paragraclick 3: click here to show the paragraph 1  </p2>

<br>

<br><br><br><br><br><br><br><br>

</body>

</html>

 

Output:

When you load the Jquerytest2.php file in the browser,the page will be like this

Sample code for Hiding and Showing a Paragraph
                                                                               Home page : When load the file Jquerytest2.php

When you click on the paragraph2 (ie; Paragraphclick 2) the paragraph 1 will hide. When you click again on the paragraph2 (ie; Paragraphclick 3) the hidden pragraph1 will be displayed.

 

Sample code for Hiding and Showing a Paragraph
                                                                          Paragraph 1 Hidden by Clicking on the Paragraph 2

Leave a Reply

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