Show and hide div based on Checkbox click using JQuery and CSS
In this article, Show/hide div according to the
selection of Checkbox using JQuery and CSS. Many times we want to be able to dynamically change what div are
show/hide using Checkbox.
For more:-
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="showhidediv.aspx.cs" Inherits="showhidediv"
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Show Hide
Div Using Radio Buttons</title>
<style type="text/css">
.box
{
width:
250px;
padding:
20px;
display:
none;
margin-top:
20px;
border:
1px solid #000;
}
.jquery
{
background:
#70b64d;
}
.css
{
background:
#f06060;
}
.gridview
{
background:
#dde73b;
}
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('input[type="checkbox"]').click(function () {
if
($(this).attr("value")
== "jquery") {
$(".jquery").toggle();
}
if
($(this).attr("value")
== "css") {
$(".css").toggle();
}
if
($(this).attr("value")
== "gridview") {
$(".gridview").toggle();
}
});
});
</script>
</head>
<body>
<div>
<label>
<input type="checkbox" name="checkbox" value="jquery">
JQuery</label>
<label>
<input type="checkbox" name="checkbox" value="css">
CSS</label>
<label>
<input type="checkbox" name="checkbox" value="gridview">
Grid View</label>
</div>
<div class="jquery box">
Thanks For visiting our blog and you
can get more article for clicking the below
click
<br />
<a href="http://www.neerajcodesolutions.com/search/label/JQuery">Click
Here</a>
</div>
<div class="css box">
Thanks For visiting our blog and you
can get more article for clicking the below
click.<br />
<a href="http://www.neerajcodesolutions.com/search/label/CSS">Click
Here</a>
</div>
<div class="gridview box">
Thanks For visiting our blog and you
can get more article for clicking the below
click.<br />
<a href="http://www.neerajcodesolutions.com/search/label/GridView">Click
Here</a>
</body>
</html>
Out-Put:-
Show and hide div based on Checkbox click using JQuery and CSS
Reviewed by NEERAJ SRIVASTAVA
on
1:12:00 PM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
1:12:00 PM
Rating:
No comments: