How to influence div with checked input if div is far away and not a relative?

user_18104437 0
Viewed 52

A have CSS-code:

 .hide, .hide + label ~ div {
    display: none; 
}

.hide:checked + label + div {
    display: block; 
}

It allows me to manipulate div next to label next to checked input.

It works fine, but is there a way, that I can manipulate div with checked/unchecked that is far away from input?

My div has class "dropdown-menu" and it is not related to input in any way and like 50 lines of code after the input.

Can I connect checked value with my "dropdown-menu" div in any way with CSS?

css html
3 Answers

CSS is limited in terms of how one selected element is able to help select and affect other elements in the DOM. You've highlighted two of the very cool combinators available to use already: the adjacent sibling combinator (+) and the general sibling combinator (~). You're no doubt familiar with the descendant combinator (_) <- that's a space. Finally, there's the child combinator (>).

Of these, the only two that I can imagine would be even potentially helpful are the general sibling combinator (~) and the descendant combinator(_). The other two describe relationships that assume very specific proximity relationships (+, >).

You can do what (I think) you're describing with the general sibling selector (at least you can if your markup structure has the dropdown menu div as a general sibling of the label element above it). I don't think it's likely to be in real life, but (assuming it is) here's a contrived example.

.me-too {
  padding: 8px;
  background-color: #fafafa;
  margin-top: 16px;
  margin-bottom: 16px;
}

.hider+label+div {
  display: none;
}

.hider:checked+label+div {
  display: block;
}

.hider+label~.dropdown-menu {
  display: none;
}

.hider:checked+label~.dropdown-menu {
  display: block;
}

.dropdown-menu {
  margin-top: 16px;
}
<header>
  <input id="my-checkbox" class="hider" name="my-checkbox" type="checkbox">
  <label for="my-checkbox">Check me!</label>
  <div>I can be hidden and revealed</div>

  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odit et ipsum aperiam dolor animi necessitatibus inventore tempora reiciendis magni a delectus quidem veritatis fuga, praesentium illo beatae voluptates magnam nulla.</div>

  <div class="me-too dropdown-menu">
    <h2>DROPDOWN MENU</h2>
    <p>I too can be hidden and revealed!</p>

    <a href="#0">Link 1</a>
    <a href="#0">Link 2</a>
    <a href="#0">Link 3</a>
    <a href="#0">Link 3</a>

  </div>

</header>

Personally, I really appreciate that you're trying to accomplish this using CSS. I think it's always better to use the simplest tool that can get the job done (HTML, CSS, HTML+CSS, or finally HTML+CSS+JS).

But if my contrived example above doesn't mirror your actual use case, you could surely use JavaScript to cover the gap right?

Let me know if I've misunderstood the intent of your question.

user_59919790

There is no way to do that. It would be possible if there were a parent combinator in CSS, but there isn't. The solution is very simple with JS-code: Here it is:

<script>
function myFunction() {
  var x = document.getElementById("dropdown");
  if (x.style.display === "none") {
     x.style.display = "block";
  } else {
     x.style.display = "none";
  }
}
</script>

Add this within container in HTML (of into JS-file if you know how to do that).

And add id to whatever block in div you are trying to hide/show. ID in JS and ID in div should be the same Also, remember that if you have basic value of display:block - everything works. But if your basic display:FLEX, or INLINE, or else - you should change 4-th line of code (with BLOCK) to whatever value you need.

user_181044370
user_56882510
Related