jQuery: Revealing or concealing several divs upon selection alteration

Question

jQuery: Revealing or concealing several divs upon selection alteration

When I populate a form, I want to display or hide multiple divs based on the OPTION selected in a DROPDOWN.

Currently, my code works but the issue is that one div can be hidden or shown by multiple OPTIONS. As a result, these divs keep toggling between hidden and visible states.

Below is the HTML snippet:

<select id="vFormat" name="vFormat" onchange="getval(this);">
    <option value="0">Choose</option>
    <option value="1" class="format1">Option 1</option>
    <option value="2" class="format2">Option 2</option>
    <option value="3" class="format3">Option 3</option>
    <option value="4" class="format4">Option 4</option>
    <option value="5" class="format5">Option 5</option>
</select>

<div class="showdivformat1 showdivformat2 hiddenelement">
   Text inside hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement">
   Text inside visible Div
</div>

This is the JQuery functionality:

function getval(sel) {

    var divval = $('.selectInput option:selected').attr('class').split(' ');

    for(var i=0; i<divval.length; i++){
        $(".hiddenelement").hide("50");
        $(".showdiv" + divval[i]).show("50");
    }

    for(var i=0; i<divval.length; i++){
        $(".visibleelement").show("50");
        $(".hidediv" + divval[i]).hide("50");
    }       
}

The challenge lies in always hiding .hiddenelement and showing .visibleelement whenever the option changes.

I am exploring solutions to detect if a div is already hidden or visible and maintain its state after the option change.

javascript jquery html css select

Answer 1

Answer №1

Take a look at this simplified and organized solution:

HTML:

<select id="vType" name="vType">
    <option value="0">Select</option>
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
    <option value="4">Type 4</option>
    <option value="5">Type 5</option>
</select>

<div class="hide-default show-3-and-4" >
   Displayed with options 3 and 4
</div>

<div class="show-all hide-4" >
   Always displayed, except with option 4
</div>

JavaScript:

$('#vType').change(function() {
    $('.hide-default').hide();
    $('.show-all').show();

    $('.show-' + $(this).val() + '-and-hide').show();
    $('.hide-' + $(this).val()).hide();
}).change();

You can view the code on JSFiddle: https://jsfiddle.net/abcdefg123/

To add more elements with default visibility settings, use classes like hide-default and show-all. Similarly, for specific display based on selected option, utilize classes such as show-X and hide-Y.

Answer 2

Take a look at this simplified and organized solution:

HTML:

<select id="vType" name="vType">
    <option value="0">Select</option>
    <option value="1">Type 1</option>
    <option value="2">Type 2</option>
    <option value="3">Type 3</option>
    <option value="4">Type 4</option>
    <option value="5">Type 5</option>
</select>

<div class="hide-default show-3-and-4" >
   Displayed with options 3 and 4
</div>

<div class="show-all hide-4" >
   Always displayed, except with option 4
</div>

JavaScript:

$('#vType').change(function() {
    $('.hide-default').hide();
    $('.show-all').show();

    $('.show-' + $(this).val() + '-and-hide').show();
    $('.hide-' + $(this).val()).hide();
}).change();

You can view the code on JSFiddle: https://jsfiddle.net/abcdefg123/

To add more elements with default visibility settings, use classes like hide-default and show-all. Similarly, for specific display based on selected option, utilize classes such as show-X and hide-Y.

Answer 3

Answer №2

The issue you are facing may require some clarification, but one potential resolution could involve toggling classes to hide and show the div element.

Answer 4

The issue you are facing may require some clarification, but one potential resolution could involve toggling classes to hide and show the div element.

Answer 5

Answer №3

Organize arrays containing jQuery Objects for each group of elements. When the user selects an option, use a conditional statement to loop through the corresponding array of jQuery objects and hide or show them accordingly.

// Psuedo Code...

var elemGroupOne = [], elemGroupTwo = [];

// Add divs to the arrays 
elemGroupOne.push(/* jQuery Object... */);

$("#vFormat").on("change", function(event) {
   var selectedValue = $(this).val();

   switch (selectedValue) {
       case "Option 1":
            // Hide group two..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).hide();  
            }

            // Show group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).show();  
            }
           break;

       case "Option 2":
            // Hide group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).hide();  
            }

            // Show group two..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).show();  
            }
           break;
   } 
});

This code can be optimized further, but I hope it gives you some insights on how to approach your question effectively.

Answer 6

Organize arrays containing jQuery Objects for each group of elements. When the user selects an option, use a conditional statement to loop through the corresponding array of jQuery objects and hide or show them accordingly.

// Psuedo Code...

var elemGroupOne = [], elemGroupTwo = [];

// Add divs to the arrays 
elemGroupOne.push(/* jQuery Object... */);

$("#vFormat").on("change", function(event) {
   var selectedValue = $(this).val();

   switch (selectedValue) {
       case "Option 1":
            // Hide group two..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).hide();  
            }

            // Show group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).show();  
            }
           break;

       case "Option 2":
            // Hide group one..
            for ( i = 0; i < elemGroupOne.length; i++ ) {
                var el = elemGroupOne[i];
                $(el).hide();  
            }

            // Show group two..
            for ( i = 0; i < elemGroupTwo.length; i++ ) {
                var el = elemGroupTwo[i];
                $(el).show();  
            }
           break;
   } 
});

This code can be optimized further, but I hope it gives you some insights on how to approach your question effectively.

Answer 7

Answer №4

Here is a possible solution:

<div class="showdivformat1 showdivformat2 hiddenelement" id="div1">
  Text of hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement" id="div2">
  Text of visible Div
</div>


function getval() {

    var divs = document.getElementsByTagName("div");

for(var i=0; i<divs.length; i++){
    $("#div"+i).hide("50");
    $("#div"+i+1).show("50");//any other way to identify ur identity of div and u are done
}

for(var i=0; i<divval.length; i++){
    $(".visibleelement").show("50");
    $(".hidediv" + divval[i]).hide("50");
}       
}

If this helps, please let me know.

Answer 8

Here is a possible solution:

<div class="showdivformat1 showdivformat2 hiddenelement" id="div1">
  Text of hidden Div
</div>

<div class="hidedivformat2 showdivformat5 visibleelement" id="div2">
  Text of visible Div
</div>


function getval() {

    var divs = document.getElementsByTagName("div");

for(var i=0; i<divs.length; i++){
    $("#div"+i).hide("50");
    $("#div"+i+1).show("50");//any other way to identify ur identity of div and u are done
}

for(var i=0; i<divval.length; i++){
    $(".visibleelement").show("50");
    $(".hidediv" + divval[i]).hide("50");
}       
}

If this helps, please let me know.

jQuery: Revealing or concealing several divs upon selection alteration

Answer №1

HTML:

JavaScript:

Answer №2

Answer №3

Answer №4

Similar questions

Proper approach for mapping JSON data to a table using the Fetch API in a React.js application

Tips for verifying the rendered view post data retrieval from an API in Vue JS

Troubles with CSS drop down alignment in Internet Explorer 7

How can I create a CSS div with a 20px margin-top distance from the div directly above

Extracting data from the response object and injecting it into the request

Having trouble establishing a connection between socket.io client and server

Error: The function $scope.apply is invalid and cannot be executed

Tips for automatically refreshing a page after submitting a form

Guide on making nested ajax calls and passing object data to controller in ASP.Net MVC 5

Having a CSS position fixed within a div container with the same width as its parent container

When the ID and anchor link within a URL fail to scroll to the specified anchor location

Rendering HTML with Apache Tiles using an empty <a></a> tag

creating images using express.js

Converting objects to arrays in reactJS

Choose either immediate offspring or immediate offspring of immediate offspring

Sophisticated filter - Conceal Ancestry

Omit punctuation from the key name in the JSON reply

retrieve information from the local JSON file

Interactive Dropdown Menus for 3 Separate Database Tables

The click() method within the click() function is malfunctioning