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 thetoggle()method. How to use it ? first call the<p>element by id then add thetoggle()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
Hek ku fots tapu hana item,adak muedeh kalapan dolar diek ata kah hh
pajan kabalek, nyak tajak fitnes lom
Hey @sogata I am @utopian-io. I have just upvoted you!
Achievements
Suggestions
Get Noticed!
Community-Driven Witness!
I am the first and only Steem Community-Driven Witness. Participate on Discord. Lets GROW TOGETHER!
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
Thank you for the contribution. It has been approved.
You can contact us on Discord.
[utopian-moderator]
Please upvote back my post and follow back me @hery0823
I like your post
Good luck @sogata