Toggle visibility of a div based on a dropdown option using the getElementsByClassName method

Question

Toggle visibility of a div based on a dropdown option using the getElementsByClassName method

Seeking assistance for switching style properties of divs based on selection from a select menu. Any guidance would be appreciated!

Here is the code:

The select tag (where I pass the value to the script function):

<div style="float: right; margin-right: 5%; width: auto;">
    <select style="border: 3px intset; border-radius: 5px; border-color: #17FFFF;" onchange="showstuff(this.value);">
        <optgroup label="Lisboa">
            <option value="Picoas">Picoas</option>
            <option value="Benfica">Benfica</option>
        </optgroup>
        <optgroup label="Porto">
            <option value="Felgueiras">Felgueiras</option>
            <option value="Maia">Maia</option>
        </optgroup>
    </select>
</div>

The divs with the class names:

<div style="width: 90%; height: 50%; background-color: #09C; overflow: scroll; overflow-x: hidden; margin-bottom: 15%; margin-left: 5%; margin-right: 5%; text-align: left; color: #000; font-size: 60%;">
    <div class="Picoas" style="height: 30%; width: 100%; background-color: #CCEAFF; display:none;">
        Timberland Picoas<br />
        Centro Colombo Morada: Av. Lusíada, Centro Colombo Piso 1, Loja 1.095<br />
        1500-392 Lisboa
    </div>
    <!-- More div elements here with different classes and content -->
</div>

The script and class definitions:

<script type="text/javascript">
function showstuff(element) {
    var elementsPicoas = document.getElementsByClassName("Picoas");
    elementsPicoas.style.display = element == "Picoas" ? "block" : "none";
    // Repeat this block for other classes like Benfica, Felgueiras, Maia
} 
</script>
<style>
.Picoas{}
.Felgueiras{}
.Benfica{}
.Maia{} 
</style>

javascript select getelementsbyclassname

Answer 1

Answer №1

Learn how to achieve this without using jQuery!

function revealContent(chosenElementClass) {

    var elementClasses = [
        "Marques",
        "Porto",
        "Braga",
        "Guimaraes"
    ];

    for (var i = 0; i < elementClasses.length; i++) {
        var elements = document.getElementsByClassName(elementClasses[i]);

        for (var j = 0; j < elements.length; j++) {
            var element = elements[j];
            element.style.display = (element.className === chosenElementClass)? "block" : "none";
        }
    }
}

Check out it in action here:

Answer 2

Learn how to achieve this without using jQuery!

function revealContent(chosenElementClass) {

    var elementClasses = [
        "Marques",
        "Porto",
        "Braga",
        "Guimaraes"
    ];

    for (var i = 0; i < elementClasses.length; i++) {
        var elements = document.getElementsByClassName(elementClasses[i]);

        for (var j = 0; j < elements.length; j++) {
            var element = elements[j];
            element.style.display = (element.className === chosenElementClass)? "block" : "none";
        }
    }
}

Check out it in action here:

Answer 3

Answer №2

If you're looking for a solution to hide and show elements dynamically, consider using jQuery. Here's an example:

$(".Tokyo, .Osaka, .Kyoto, .Hiroshima").hide(); //hide all
$("." + element).show(); //display only the selected one

Update

Upon closer inspection, it seems like the issue lies in the getElementsByClassName function returning multiple elements due to repetitive class declarations. To tackle this without jQuery, try the following approach:

function display(className, mode)
{
    var elements = document.getElementsByClassName(className);

    for (var i = 0; i < elements.length; i++)
    {
        elements[i].style.display = mode;
    }

}

function showElement(element) 
{
    //hide all elements
    var allElements = ["Tokyo", "Osaka", "Kyoto", "Hiroshima"];

    for (var i = 0; i < allElements.length; i++)
    {
        display(allElements[i], "none");
    }

    //display the selected element
    display(element, "block");
}

Answer 4

If you're looking for a solution to hide and show elements dynamically, consider using jQuery. Here's an example:

$(".Tokyo, .Osaka, .Kyoto, .Hiroshima").hide(); //hide all
$("." + element).show(); //display only the selected one

Update

Upon closer inspection, it seems like the issue lies in the getElementsByClassName function returning multiple elements due to repetitive class declarations. To tackle this without jQuery, try the following approach:

function display(className, mode)
{
    var elements = document.getElementsByClassName(className);

    for (var i = 0; i < elements.length; i++)
    {
        elements[i].style.display = mode;
    }

}

function showElement(element) 
{
    //hide all elements
    var allElements = ["Tokyo", "Osaka", "Kyoto", "Hiroshima"];

    for (var i = 0; i < allElements.length; i++)
    {
        display(allElements[i], "none");
    }

    //display the selected element
    display(element, "block");
}

Answer 5

Answer №3

A more streamlined approach using jQuery:

<script type="text/javascript>
$(document).ready(function(){
   $("#selectOption").change(function(){
     $(".dynamicContent").css("display", "none");
     $("."+this.value).css("display", "block");
   });
});
</script>

<style>
.dynamicContent
   {
       height: 50%; 
       width: 80%; 
       background-color: #F6E3FF; 
       margin-top: 5%;
       display:none;
   }
.option1{}
.option2{}
.option3{}
.option4{} 
</style>

<div class="option1 dynamicContent">
    Option 1 Details here<br />
    Address: 123 Main Street, Anytown USA 12345<br />
</div>
<div class="option2 dynamicContent">
    Option 2 Details here<br />
    Address: 456 Elm Avenue, Another City XYZ ABC<br />
</div>
(etc.)

http://jsbin.com/awesome/78654/edit

Answer 6

A more streamlined approach using jQuery:

<script type="text/javascript>
$(document).ready(function(){
   $("#selectOption").change(function(){
     $(".dynamicContent").css("display", "none");
     $("."+this.value).css("display", "block");
   });
});
</script>

<style>
.dynamicContent
   {
       height: 50%; 
       width: 80%; 
       background-color: #F6E3FF; 
       margin-top: 5%;
       display:none;
   }
.option1{}
.option2{}
.option3{}
.option4{} 
</style>

<div class="option1 dynamicContent">
    Option 1 Details here<br />
    Address: 123 Main Street, Anytown USA 12345<br />
</div>
<div class="option2 dynamicContent">
    Option 2 Details here<br />
    Address: 456 Elm Avenue, Another City XYZ ABC<br />
</div>
(etc.)

http://jsbin.com/awesome/78654/edit

Toggle visibility of a div based on a dropdown option using the getElementsByClassName method

Answer №1

Answer №2

Answer №3

Similar questions

Tips for selecting a specific input field in a ReactJS component with multiple inputs

Exploring the possibilities of utilizing a Kendo grid within an ASP.NET Web API

Exploring Kendo Pages with ID Navigation and Displaying Information

What's preventing me from tapping on hyperlinks on my mobile device?

Can we determine the drop location of an object in jQuery UI?

React-native horizontal sliding plugin

Can components be designed in a way that includes elements such as buttons or text areas in the code, but allows for them to be excluded when the component is used?

Error message thrown by a React custom hook: "Error: Queue is missing. This is probably a bug within React. Please report this issue."

Best practice for showcasing the output of an array in Javascript

How can I retrieve the word that comes after a specific word in discord.js

Creating a pop-up window displaying event details when a user hovers over or clicks on an event in fullcalendar using JavaScript

Leverage the potential of the value parameter within a mongoose scope

How can pagination be implemented with a line chart in Chart.js?

What could be causing this code to malfunction when using D3.min version instead?

Discovering the category to which $(this) belongs

I just obtained the height measurement of a dynamic table - now I must transfer this height value to a different element

What is the process to gain entry to a Vue3 instance from another location in order to execute a specific function

What sets $vm.user apart from $vm.$data.user in Vuejs?

Question about using React, NPM, Vite, Babel, and Node.js together

Leveraging Firebug debugger to troubleshoot and resolve script conflicts