How to change the style of unrelated element in CSS

Question

I am creating a side navigation bar using CSS only. I was able to trigger dropdown menus using checkbox triggers:

[type="checkbox"] {
    display: none;
    &:checked ~ div
    {
        display: block;
    }
}

HTML Structure:

<ul>
    <li>
        <input type="checkbox" id="chk1">
        <label for="chk1">Dropdown 1</label>
        <div class="dropnav">
           .. list of sub menu
        </div>
    </li>
    <li>
        <input type="checkbox" id="chk2">
        <label for="chk2">Dropdown 1</label>
        <div class="dropnav">
           .. list of sub menu
        </div>
    </li>
    <li>
        <input type="checkbox" id="chk3">
        <label for="chk3">Dropdown 1</label>
        <div class="dropnav">
           .. list of sub menu
        </div>
    </li>
</ul>

So as you can see when the checkbox is 'checked' the next sibling div element will be display: block to show the dropdown menus, and it's working. However I have multiple dropdown menus and I would like close other dropdown menus when one of them was open. For example if I trigger the 'chk1' it will open its sibling 'dropnav' menu then the other 'dropnav' will be closed (display: none). Is this possible for a CSS only solution?

This might help: https://stackoverflow.com/a/9709425/5641669 — Johannes, Nov 09 '20 at 16:07

score 2 · Answer 1 · edited Nov 09 '20 at 20:03

2

Use type radio with the same names instead of checkboxes:

[type="radio"] {
  display: none;
}

.dropnav {
  display: none;
}

[type="radio"]:checked~div {
  display: block;
}

<ul>
  <li>
    <input type="radio" name="c" id="chk1">
    <label for="chk1">Dropdown 1</label>
    <div class="dropnav">
      .. list of sub menu
    </div>
  </li>
  <li>
    <input type="radio" name="c" id="chk2">
    <label for="chk2">Dropdown 1</label>
    <div class="dropnav">
      .. list of sub menu
    </div>
  </li>
  <li>
    <input type="radio" name="c" id="chk3">
    <label for="chk3">Dropdown 1</label>
    <div class="dropnav">
      .. list of sub menu
    </div>
  </li>
</ul>

edited Nov 09 '20 at 20:03

Stephen P

14,422
2
43
67

answered Nov 09 '20 at 17:00

Nasim B. D

161
1
6

2

This is great! One question: How would you close all the dropdowns? – Kosh Nov 09 '20 at 23:44
Yes, the problem would be it can't close all dropdown..any solution for that? – saionachi Nov 10 '20 at 02:03
For closing all of them, I know a solution but it requires jquery and as you were interested in a solution in css, I didn't mention it. – Nasim B. D Nov 10 '20 at 11:30

How to change the style of unrelated element in CSS

1 Answers1