Open In App

How to Show and Hide div elements using radio buttons?

Improve
Improve
Like Article
Like
Save
Share
Report

In this article, we will see how we can show and hide div elements by clicking on the radio buttons. There are different methods available in jQuery to accomplish this task as listed below:

Using the hide() and show() methods

The hide() and show() methods are used to add the display: none and display: block properties respectively to the selected element.

Syntax:

$(selector).hide(speed, callback);
$(selector).show(speed, callback);

Example: In the below code the hide(0 and show() methods are used to hide and show the div element.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Show and Hide div elements
        using radio buttons
    </title>
    <script src=
    </script>
    <style type="text/css">
        .selectt {
            color: #fff;
            padding: 30px;
            display: none;
            margin-top: 30px;
            width: 60%;
            background: green
        }
 
        label {
            margin-right: 20px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            Show and Hide div elements
            using radio buttons
        </h3>
        <div>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="C">
                C
            </label>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="Cplus">
                C++
            </label>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="Python">
                Python
            </label>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="Java">
                Java
            </label>
        </div>
        <div class="C selectt">
            <strong>C</strong>
            is a procedural
            programming language
        </div>
        <div class="Cplus selectt">
            <strong>C++</strong>
            is a general purpose
            programming language
        </div>
        <div class="Python selectt">
            <strong>Python</strong>
            is a widely used general-purpose,
            high level programming language.
        </div>
        <div class="Java selectt">
            <strong>Java</strong>
            is a most popular programming
            language for many years.
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('input[type="radio"]').
                click(
                    function () {
                        const inputValue =
                        $(this).attr("value");
                        const targetBox =
                        $("." + inputValue);
                        $(".selectt").
                        not(targetBox).hide();
                        $(targetBox).show();
                    }
                );
            });
        </script>
    </center>
</body>
 
</html>


Output:

radioClickGIF

Using the css() method

The css() method is used to set the CSS properties inline by passing them and their values as parameters to it.

Syntax:

$('element_selector').css('css_property', 'property_value');

Example: The below example implements the css() method to hide and show the div elements.

html




<!DOCTYPE html>
<html>
 
<head>
    <title>
        Show and Hide div elements
        using radio buttons
    </title>
    <script src=
    </script>
    <style type="text/css">
        .selectt {
            color: #fff;
            padding: 30px;
            display: none;
            margin-top: 30px;
            width: 60%;
            background: green
        }
 
        label {
            margin-right: 20px;
        }
    </style>
</head>
 
<body>
    <center>
        <h1 style="color:green;">
            GeeksforGeeks
        </h1>
        <h3>
            Show and Hide div elements
            using radio buttons
        </h3>
        <div>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="C">
                C
            </label>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="Cplus">
                C++
            </label>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="Python">
                Python
            </label>
            <label>
                <input type="radio"
                       name="colorRadio"
                       value="Java">
                Java
            </label>
        </div>
        <div class="C selectt">
            <strong>C</strong>
            is a procedural
            programming language
        </div>
        <div class="Cplus selectt">
            <strong>C++</strong>
            is a general purpose
            programming language
        </div>
        <div class="Python selectt">
            <strong>Python</strong>
            is a widely used general-purpose,
            high level programming language.
        </div>
        <div class="Java selectt">
            <strong>Java</strong>
            is a most popular programming
            language for many years.
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                $('input[type="radio"]').
                click(
                    function () {
                        const inputValue =
                        $(this).attr("value");
                        const targetBox =
                        $("." + inputValue);
                        $(".selectt").
                        not(targetBox).css('display', 'none');
                        $(targetBox).css('display', 'block');
                    }
                );
            });
        </script>
    </center>
</body>
 
</html>


Output:

radioClickGIF

jQuery is an open source JavaScript library that simplifies the interactions between an HTML/CSS document, It is widely famous with it’s philosophy of “Write less, do more”. You can learn jQuery from the ground up by following this jQuery Tutorial and jQuery Examples.



Last Updated : 20 Dec, 2023
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads