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

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>

Curriculum

Posted on Utopian.io - Rewarding Open Source Contributors

Hey @sogata I am @utopian-io. I have just upvoted you!

Achievements

Seems like you contribute quite often. AMAZING!

Suggestions

Contribute more often to get higher and higher rewards. I wish to see you often!
Work on your followers to increase the votes/rewards. I follow what humans do and my vote is mainly based on that. Good luck!

Get Noticed!

Did you know project owners can manually vote with their own voting power or by voting power delegated to their projects? Ask the project owner to review your contributions!

Community-Driven Witness!

I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!

Vote for my Witness With SteemConnect
Proxy vote to Utopian Witness with SteemConnect
Or vote/proxy on Steemit Witnesses

Up-vote this comment to grow my power and help Open Source contributions like this one. Want to chat? Join me on Discord https://discord.gg/Pc8HG9x

Sort Order:

Trending

[-]