0

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?

InSync
  • 4,851
  • 4
  • 8
  • 30
sevenkader
  • 9
  • 4
  • You have assigned the same ID value to two different elements, which is not valid HTML. IDs must be unique within the document. – Mihail Nicoara May 01 '23 at 20:20
  • So does this make this essentially impossible then? In terms of using www.hello.com/#targeturl to both hide and show (when someone visits that specific url), since there's no way to add to different divs to a url like www.hello.com/#targeturl#targeturl2 – sevenkader May 01 '23 at 20:29
  • I don’t think it is possible, why don’t you use javascript to do the hide-show effect? – harry May 01 '23 at 20:39
  • To achieve what I explained, are you able to tell me how to do that please? – sevenkader May 01 '23 at 21:02
  • I figured it out with Javascript as you said, no need to explain how to do it, thank you! – sevenkader May 01 '23 at 21:10

2 Answers2

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.

InSync
  • 4,851
  • 4
  • 8
  • 30
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>
Damzaky
  • 6,073
  • 2
  • 11
  • 16