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.




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 Show and hide div based on radio button click using JQuery and CSS Reviewed by NEERAJ SRIVASTAVA on 11:27:00 AM Rating: 5

No comments:

Powered by Blogger.