Show and hide div based on radio button click using JQuery and CSS
In this article, Show/hide div according to the
selection of radio button using JQuery and CSS. Many times we want to be able to dynamically change
what div are show/hide using radio button.
For more:-
How to save the value of radiobuttonlist in database asp.net C# , How to insert multiple Checkboxlist value into database in asp.net c#,
How to save the value of radiobuttonlist in database asp.net C# , How to insert multiple Checkboxlist value into database in asp.net c#,
Source Code:-
<%@
Page Language="C#" AutoEventWireup="true" CodeFile="showhideusingradiobutton.aspx.cs"
Inherits="showhideusingradiobutton" %>
<!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="radio"]').click(function () {
if
($(this).attr("value")
== "jquery") {
$(".box").not(".jquery").hide();
$(".jquery").show();
}
if
($(this).attr("value")
== "css") {
$(".box").not(".css").hide();
$(".css").show();
}
if
($(this).attr("value")
== "gridview") {
$(".box").not(".gridview").hide();
$(".gridview").show();
}
});
});
</script>
</head>
<body>
<div>
<label>
<input type="radio" name="Radiobutton" value="jquery">
JQuery</label>
<label>
<input type="radio" name="Radiobutton" value="css">
CSS</label>
<label>
<input type="radio" name="Radiobutton" 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 radio button click using JQuery and CSS
Reviewed by NEERAJ SRIVASTAVA
on
11:27:00 AM
Rating:
Reviewed by NEERAJ SRIVASTAVA
on
11:27:00 AM
Rating:
No comments: