How to create a toggle button to show and hide an element

sogata(59)

Published in

#utopian-io

Words

456

Reading

3 min

Listen

Play

What Will I Learn?

You will learn how to get html element using jquery
You will learn jQuery click event
You will learn about toggle() method

Requirements

You have basic about HTML
You have basic about CSS
You have basic about JavaScript
To practice this tutorial need an text editor, browser and host jQuery file (or you can also add jQuery CDN).

In this tutorial I use Visual Studio Code for Text Editor and Google Crome for Browser

Difficulty

Basic

Tutorial Contents

In this tutorial we will create a button that when we click it will appear the content and when we click for other time the content will be hide.

Open your text editor ( recomended notepad++, Visual Studio Code or gedit )
Create new file and save as html extention, like toggle.html
Create html element as usual.

<html>
    <head>
        <title>Toggle</title>
    </head>
    <body>
    </body>
</html>

Create a button as toggle to hide and show an element. You can create it as usual using html code, here the example :

<button>Hide/Show</button>

Create an element that we will use to hide and show. For Example I create a <p> element. You can create other element as you want.

<p>Seamlessly sync your projects and <br> contributions with the Github feed</p>

To get HTML element in jQuery we can get by id,class or tag html. In this tutorial I use ID to get eht element, So we should add the id for <button> and <p> element.

<button id="toggle">Hide/Show</button>
        <p id="content"> Seamlessly sync your projects and <br> contributions with the Github feed</p>

Before using jQuery we should Download and host the jQuery file. If you don't to host, You can also add the jQuery CDN in <head> element. Where we get jQuery file or CDN ? you can visit here for detail. In this tutorial I use jQuary Google CDN.

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

Open The <script> Tag before </body> . Or you can also add the Script in external js file

<script></script>

To start jQuery, we need to add the ready() event fisrt. it is to ensure that all html element was loaded, then load the jQuery. Note : All jQuery Code we should add in <script> tag.

            $(document).ready(function(){
                ...
            });

Add the click event on button. To add the event on element of html we just need call it id or class, like this :

                $("#toggle").click(function(){
                });

#toggle : the id of button . click() : click event. function(){} : open the function

To hide and show the <p> element we need use the toggle() method. How to use it ? first call the <p> element by id then add the toggle() method like this

$("#content").toggle();

#content : The ID of <p> element. toggle() method to hide and show and element.

Finish, Save the file and run it on your browser and try to click the button, you will see the <p> element hide and show.

LIVE DEMO

The full code :

<html>
    <head>
        <title>Toggle</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    </head>
    <body>
        <button id="toggle">Hide/Show</button>
        <p id="content"> Seamlessly sync your projects and <br> contributions with the Github feed</p>
        <script>
            $(document).ready(function(){
                $("#toggle").click(function(){
                    $("#content").toggle();
                });
            });
        </script>
    </body>
</html>