How to show/hide div element depending multiple values using Bootstrap and jQuery ?

Last Updated : 03 Aug, 2021

Bootstrap and jQuery have been used together to develop interactive web applications. Both Bootstrap and jQuery are free and open source which makes it popular among developers. This article deals with showing and hiding division depending on user input with the help of Bootstrap and jQuery. Below shown are two approaches to establish the same.

First Approach: In the first method, only one division is visible at a time depending on the input from the user. This method comprises a drop down list with three options. The user can select one option at a time and depending on the value of the option the corresponding division is displayed. The method used in the code snippet are as follows:

$(document).ready(function): The ready event is triggered when the document is loaded and the function passed as parameter is executed.
$(selector).change(function): The change event is triggered when the selected element (input, textarea or select) has been changed and the function passed as a parameter is executed. Here the function passed as parameter is invoked when the user selects an option from the drop down menu.
$(selector).find(filter): This method returns all the descendant elements of the selected element. Here <option> is the descendant of <select>. Also, the method requires a filter to return the required element. Here the selected option is the filter ie the option selected by the user is returned.
$(selector).each(function): This method executed the function passed as parameter for each matched element. Here the function passed as parameter executes for each element returned by the find() method.
$(selector).attr(attribute): This method set or return attributes and values of the selected elements respectively. Here the value of the selected option is extracted into the optionValue variable.
$(selector).not(criteria): This method returns elements that do not match the specified criteria. Here the not method returns the options that are not selected by the users.
$(selector).hide(): This method hides the selected element.
$(selector).show(): This method shows the selected element.

Explanation: The page displays a drop down menu from which the user selects an option. As soon as a change occurs in the <select> element, the change() method is triggered which in turn invokes the find function and it returns the selected option. The attr() method extracts the value of the option into the optionValue variable. The optionValue variable is appended with '.' (which turns it into one among the defined division classes) in the not() method. The not() method hides all the classes that do not match the class mentioned in the criteria. The show() method finally displays the division as selected by the user. If no option is selected by the user then all the divisions are hidden.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Show Hide Elements Using Dropdown</title>

    <!--CSS stylesheet-->
    <style>
        .box {
            color: #fff;
            padding: 20px;
            display: none;
            margin-top: 20px;
        }

        .red {
            background: red;
        }

        .green {
            background: green;
        }

        .blue {
            background: blue;
        }
    </style>
    <!--importing jquery cdn-->
    <script src=
"https://code.jquery.com/jquery-1.12.4.min.js">
    </script>

    <script>
        // jQuery functions to hide and show the div
        $(document).ready(function () {
            $("select").change(function () {
                $(this).find("option:selected")
                       .each(function () {
                    var optionValue = $(this).attr("value");
                    if (optionValue) {
                        $(".box").not("." + optionValue).hide();
                        $("." + optionValue).show();
                    } else {
                        $(".box").hide();
                    }
                });
            }).change();
        });
    </script>
</head>

<body>
    <div>
        <!--dropdown list options-->
        <select>
            <option>Choose Color</option>
            <option value="red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>
    </div>
    <!--divs that hide and show-->
    <div class="red box">Red Selected</div>
    <div class="green box">Green Selected</div>
    <div class="blue box">Blue Selected</div>
</body>

</html>

Output:

Second Approach: This approach demonstrates how one or more divisions can be displayed simultaneously. This method makes use of checkboxes for taking user input. As check boxes are capable of taking more than one value at a time hence it is an ideal choice to serve our purpose. The following methods are used in the code:

$(document).ready(function): The ready event is triggered when the document is loaded and the function passed as parameter is executed.
$(selector).click(function): This method triggers the click event or executes a function when a click event occurs. Here as the user checks the checkbox the click event is triggered and the function passed as parameter is executed.
$(selector).attr(attribute): This method returns the values of the selected elements. Here the value of the selected option is extracted into the inputValue variable.
$(selector).toggle(): This method toggles between hide() method and show() method for the selected elements. If the box is checked the division is shown. If the box is unchecked the division is hidden.

Explanation: The webpage comprises certain checkboxes. The user may select one or more than one check boxes at a time. The divisions corresponding to the checkboxes are shown if they were hidden initially. If the checkboxes are unchecked then the corresponding division is hidden.

html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>Show Hide Elements Using Checkboxes</title>

    <!--CSS stylesheet-->
    <style>
        .box {
            color: #fff;
            padding: 20px;
            display: none;
            margin-top: 20px;
        }

        .red {
            background: red;
        }

        .green {
            background: green;
        }

        .blue {
            background: blue;
        }

        label {
            margin-right: 15px;
        }
    </style>

    <!--import jQuery cdn-->
    <script src=
        "https://code.jquery.com/jquery-1.12.4.min.js">
    </script>

    <script>

        // jQuery functions to show and hide divisions
        $(document).ready(function () {
            $('input[type="checkbox"]').click(function () {
                var inputValue = $(this).attr("value");
                $("." + inputValue).toggle();
            });
        });
    </script>
</head>

<body>

    <div>
        <!--checkboxes-->
        <label><input type="checkbox" 
            name="colorCheckbox" value="red">
            red
        </label>

        <label><input type="checkbox" 
            name="colorCheckbox" value="green"> 
            green
        </label>

        <label><input type="checkbox" 
            name="colorCheckbox" value="blue"> 
            blue
        </label>
    </div>

    <!--Divisions to be shown and hidden-->
    <div class="red box">Red Selected</div>
    <div class="green box">Green Selected</div>
    <div class="blue box">Blue Selected</div>
</body>

</html>

Output

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.