Reveal div by clicking a link, make it hidden again by clicking another

Issue

I’m pretty new to html and css, so this may be a stupid question, but I want an area where there is a text you can click on that reveals an entire div full of text, with another clickable text at the bottom to hide it again, completely JQuery and Javascript free, only using html and css. Not only that but I need several of them one on top of the other. This is what I’ve got so far:

.horizontal-box{
  display: inline-flex;
  flex-direction: column;
}
.displayable-text{
  display: none;
}
#one.show:target ~ #one.displayable-text{
  display: inline-block;
}
#one.hide:target ~ #one.displayable-text{
  display: none;
}
#two.show:target ~ #two.displayable-text{
  display: inline-block;
}
#two.hide:target ~ #two.displayable-text{
  display: none;
}
<div class="horizontal-box">
  <div>
    Bla bla bla
    <a href="#one" class="show">show text</a>
    <div id="one" class="displayable-text">
      Bla bla bla
      <a href="#one" class="hide">hide text</a>
    </div>
  </div>
  <div>
  Bla bla bla
    <a href="#two" class="show">show text</a>
    <div id="two" class="displayable-text">
      Bla bla bla
      <a href="#two" class="hide">hide text</a>
    </div>
  </div>
</div>

Could someone please explain to me what I’ve done wrong or tell me how to do it? I have no idea of why it doesn’t work.

Solution

This is the only way I can think of without using JS. I’m using the labels for attribute to target a hidden checkbox’s ID. In the CSS I’m using the input:checked selector to hide and show the div with the hidden content.

.hidden {
  display: none;
}
.pointer {
 cursor: pointer;
}
.horizontal-box {
  display: inline-flex;
  flex-direction: column;
}
.displayable-text {
  display: none;
}
input:checked ~ div {
  display: inline-block;
}
input:checked ~ label {
  display: none;
}
<div class="horizontal-box">
  <div>
    Bla bla bla
    <input type="checkbox" id="one" class="hidden">
    <label for="one" class="pointer"><strong>show text</strong></label>
    <div class="hidden">
      Bla bla bla
      <label for="one" class="pointer"><strong>hide text</strong></label>
    </div>
  </div>
  <div>
    Bla bla bla
    <input type="checkbox" id="two" class="hidden">
    <label for="two" class="pointer"><strong>show text</strong></label>
    <div class="hidden">
      Bla bla bla
      <label for="two" class="pointer"><strong>hide text</strong></label>
    </div>
  </div>
</div>

Answered By – WizardCoder

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published