Jquery Hide and Show onclick Button
Example 1 - Simple Hide and show Button.
- Create a div tag
- Add attribute id
- Write some content inside a div tag
- Create a Button for hiding and showing your content
- For showing the content Add a class in your input button
- For hiding the content Add a class in your input button
<div id="div_content">
hi, welcome to shot tutorials.
</div>
<input type = "button" class ="show" value="show">
<input type = "button" class ="hide" value="hide">
- Now we will write some code for hiding and show.
<script>
$(document).ready(function(){
// For Show
$(".show").on("click", function(){
$("#div_content").show();
});
// For hide
$(".hide").on("click", function(){
$("#div_content").hide();
});
});
</script>
Example 2 - By CSS
- Create a div tag
- Add attribute id
- Write some content inside a div tag
- Create a Button for hiding and showing your content
- For showing the content Add a class in your input button
- For hiding the content Add a class in your input button
- Write CSS for a hide and show.
- By default, the content will be show (you can do according to your requirements )
- Write some code for hiding and show
<div id="div_content">
hi, welcome to shot tutorials.
</div>
<input type = "button" class ="show" value="show">
<input type = "button" class ="hide" value="hide">
<style>
.div_content_show{
display:block;
}
.div_content_hide{
display:none;
}
</style>
<script>
$(document).ready(function(){
// For Show
$(".show").on("click", function(){
$("#div_content").removeClass("div_content_hide");
$("#div_content").addClass("div_content_show");
});
// For hide
$(".hide").on("click", function(){
$("#div_content").removeClass("div_content_show");
$("#div_content").addClass("div_content_hide");
});
});
</script>
If any mistakes I made here, so please let me know and improve me.If you have any query, feel free to ask me ЁЯШКRecommended post
- How to shift button in Clock wise in javaScript using ECMA6?
- How to Encode and Decode Strings with Base64 in JavaScript examples
- How to Reset DropDownList Selection Using jQuery?
- Create dynamic drop-down list option with JavaScript and jQuery
- Onclick show and hide div using JQuery with examples
- How to Get All Google play store apps List using PHP Scraper?
- How to pass a variable from the command line using PHP?
- How to Submit Registration and Login Form in PHP?
- Introduction PHP
- how to declare variables in PHP?
- What things you need to install PHP?
- How to get meta tags in 2 easy way in PHP
Post a Comment
Please do not enter any spam link in the comment section.