Question 108662 in Wordpress Question posted in
The official Wordpress documentation can be found here.

WordPress – Is it possible to both hide and show different div/elements using :target

I have a url where I used target, example: www.hello.com/#targeturl

I want to use that to hide an element, and also show a different element that’s hidden. Is there a way to go about doing this?

The way I tried doing it was by using the below to show two "display: none" elements

<div id="targeturl" class="classy">
<div id="targeturl" class="classier">

and then used the CSS:

#targeturl.classy:target {
    display: block!important;
}

#targeturl.classier:target {
    display: block!important;
}

But of course this doesn’t work, is there a way to make this happen?

Tags:

2

Answers


  1. 0

    You can do that without JS using the <label> – <input type="checkbox"> trick:

    .classy, .classier {
  display: none;
  height: 100px;
  aspect-ratio: 1 / 1;
}

input:checked ~ .classy,
input:not(:checked) ~ .classier {
  display: block;
}

.classy {
  background: #eee8aa;
}

.classier {
  background: #96e3ce;
}
    <a href="#targeturl">
  <label for="targeturl">Click me!</label>
</a>

<!-- This is meant to be hidden -->
<input type="checkbox" id="targeturl">

<div class="classy">.classy</div>
<div class="classier">.classier</div>

    Note that this will scroll to the checkbox instead of the two <div>s. Setting a different id for it (or hide it using display: none/visibility: hidden) will effectively remove this behaviour altogether.

    Login or Signup to reply.
  2. 0

    Solution using :target

    As said in the comments, ID should be unique, but we can still use unique ID to show/hide elements with CSS.

    As long as the ID is attached in an element that is at least the lowest common ancestor and the oldest of the elements you want to hide (classy, classiest, classiest), we can use CSS sibling combinator (~) and do this:

    .classy,
.classier,
.classiest {
  display: none;
}

#targeturl:target.classy,
#targeturl:target~.classier,
#targeturl:target~* .classiest {
  display: block;
}
    <a href="#targeturl">SHOW</a> | <a href="#">HIDE</a>

<div id="targeturl" class="classy">
  hidden classy
</div>
<div>
  something not hidden
</div>
<div class="classier">
  hidden classier
</div>
<div>
  yet again something not hidden
</div>
<div>
  another thing not hidden
  <div class="classiest">
    hidden classiest
  </div>
</div>

    If you’re fine with changing the HTML structure, it’s also better to attach the ID to the parent of the elements you want to hide:

    .classy,
.classier,
.classiest {
  display: none;
}

#targeturl:target .classy,
#targeturl:target .classier,
#targeturl:target .classiest {
  display: block;
}
    <a href="#targeturl">SHOW</a> | <a href="#">HIDE</a>

<div id="targeturl">
  <div class="classy">
    hidden classy
  </div>
  <div>
    something not hidden
  </div>
  <div class="classier">
    hidden classier
  </div>
  <div>
    yet again something not hidden
  </div>
  <div>
    another thing not hidden
    <div class="classiest">
      hidden classiest
    </div>
  </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search