Toggle collapsible element visibility with select

Question

Is there a way to toggle the visibility of elements with a select's options?

I've tried to put the data-bs-toggle/data-bs-target attributes :

directly on the option,
on an inner a,
on an inner button.

None is working.

The closest which works is using a Bootstrap dropdown.

PS: the final objective is to implement dependent parent-child selects: you select a value in the parent select, and the corresponding child select is made visible.

<html>
    <head>
        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
        <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    </head>
    <body>
        <select>
            <option data-bs-toggle="collapse" data-bs-target="#content1">#1</option>
            <option data-bs-toggle="collapse" data-bs-target="#content2">#2</option>
            <option data-bs-toggle="collapse" data-bs-target="#content3">#3</option>
        </select>

        <select>
            <option><a data-bs-toggle="collapse" data-bs-target="#content1" href="#">#1</a></option>
            <option><a data-bs-toggle="collapse" data-bs-target="#content2" href="#">#2</a></option>
            <option><a data-bs-toggle="collapse" data-bs-target="#content3" href="#">#3</a></option>
        </select>

        <select>
            <option><button type="button" data-bs-toggle="collapse" data-bs-target="#content1">#1</button></option>
            <option><button type="button" data-bs-toggle="collapse" data-bs-target="#content2">#2</button></option>
            <option><button type="button" data-bs-toggle="collapse" data-bs-target="#content3">#3</button></option>
        </select>

        <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-bs-toggle="dropdown">#</button>
            <ul class="dropdown-menu">
                <li><a class="dropdown-item" data-bs-toggle="collapse" data-bs-target="#content1" href="#">#1</a></li>
                <li><a class="dropdown-item" data-bs-toggle="collapse" data-bs-target="#content2" href="#">#2</a></li>
                <li><a class="dropdown-item" data-bs-toggle="collapse" data-bs-target="#content3" href="#">#3</a></li>
            </ul>
        </div>

        <div id="container">
            <span id="content1" class="collapse show" data-bs-parent="#container">#1</span>
            <span id="content2" class="collapse" data-bs-parent="#container">#2</span>
            <span id="content3" class="collapse" data-bs-parent="#container">#3</span>
        </div>
    </body>
</html>

The permitted content for option elements is text, trying to stick a or button in there makes little sense to begin with. — C3roe
– C3roe, Commented Mar 24 at 9:54

Ori Drori · Accepted Answer · 2025-03-22 16:31:17Z

2

You can use the :has() pseudo-class to show elements according to the option :checked:

#container span {
  display: none;
}

.select:has(option:nth-child(1):checked) + #container #content1 {
  display: block;
}

.select:has(option:nth-child(2):checked) + #container #content2 {
  display: block;
}

.select:has(option:nth-child(3):checked) + #container #content3 {
  display: block;
}

<select class="select">
  <option>#1</option>
  <option>#2</option>
  <option>#3</option>
</select>

<div id="container">
  <span id="content1">#1</span>
  <span id="content2">#2</span>
  <span id="content3">#3</span>
</div>

answered Mar 22 at 16:31

Ori Drori

196k32 gold badges243 silver badges233 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Pragmateek Mar 22 at 21:02

Thanks, this is a nice pure CSS solution. I expected a more streamlined Bootstrap solution, but it is what it is. :) I guess there is no way of generalizing the rule like .select:has(option:nth-child({i}):checked) + #container #content{i}.

Collectives™ on Stack Overflow

Toggle collapsible element visibility with select

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related