Search code examples
htmlcssbuttonhyperlinkshow-hide

Toggle the status of a checkbox in the checkbox hack with a hyperlink

My colleague and I worked on a website that contains a FAQ page. After each question, there is an "Answer"(Antwoord) spoiler button. Clicking the button shows the answer below the current question, and above the next question. Clicking the button again hides the answer. This makes it easy to scroll through the list of all questions and find the question you could be interested in.

Now the problem I face is that I want to link to for example the answer of question 5, from the answer of question 1.

I could give the <div> that contains question 5 an id= property to link to that, but ideally, I want to show the answer straight away by making the hyperlink "click" the Answer button.

It turns out that I will need to modify the checkbox hack in order for this to properly work, but I face the problem that I can't have both an Hyperlink and a Label on one piece of text.

Just to be clear: I'm looking for a solution using only HTML/CSS.

My original code with just a spoiler button

.spoilerbutton {
  display: block;
  border: none;
  padding: 0px 0px;
  margin: 10px 0px;
  font-size: 150%;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  outline: 0;
}

.spoiler {
  overflow: hidden;
}

.spoiler>div {
  -webkit-transition: all 0s ease;
  -moz-transition: margin 0s ease;
  -o-transition: all 0s ease;
  transition: margin 0s ease;
}

.spoilerbutton[value="Antwoord"]+.spoiler>div {
  margin-top: -500%;
}

.spoilerbutton[value="Hide Antwoord"]+.spoiler {
  padding: 5px;
}
<strong>1. Question 1?</strong> <input class="spoilerbutton" onclick="this.value=this.value=='Antwoord'?'Verberg':'Antwoord';" type="button" value="Antwoord" />
<div class="spoiler">
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>

Trying to implement solutions from: Can I have an onclick effect in CSS?

I get the following which doesn't work: 

#btnControll1 {
    display: none;
}

.spoilerbutton {
  display: block;
  border: none;
  padding: 0px 0px;
  margin: 10px 0px;
  font-size: 150%;
  font-weight: bold;
  color: #000000;
  background-color: transparent;
  outline: 0;
}

.spoiler {
  overflow: hidden;
}

.spoiler>div {
  -webkit-transition: all 0s ease;
  -moz-transition: margin 0s ease;
  -o-transition: all 0s ease;
  transition: margin 0s ease;
}

#btnControl1:checked + label {
margin-top; -500%
}
<strong>1. Question 1?</strong> <input type"chekbox" id="btnControl1" />
<label class="spoilerbutton" for="btnControl1">Antwoord</label>
<div class="spoiler">
  <div>
    <ul>
      <li>possible answer 1.</li>
      <li>possible answer 2.</li>
      <li>possible answer 3.</li>
    </ul>
  </div>
</div>

Using combinations of <label> and <a href> (also not working)

.spoilerbutton {
display: none;
}
.spoiler {
overflow: hidden;
height:2em;
}
.spoiler>div {
-webkit-transition: all 0s ease;
-moz-transition: margin 0s ease;
-o-transition: all 0s ease;
transition: margin 0s ease;
}
.spoilerbutton+.spoiler>div {
margin-top: -500%;
}
.spoilerbutton+.spoiler>label:before {
content: 'Antwoord';
font-size: 150%;
font-weight: bold;
color: #000000;
}
.spoilerbutton:checked+.spoiler>label:before {
content: 'Verberg';
}
.spoilerbutton:checked+.spoiler {
height:auto;
}
.spoilerbutton:checked+.spoiler>div {
margin-top: 0;
}
<strong>1. Question 1?</strong> <input type="checkbox" id="question1" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question1"></label>
<div>
<ul>
<li><a href="#question5"><label for="#answer5">Open 5. link first</label></a></li>
<li><label for="question5"><a href="#answer5">Open 5. label first</a></label></li>
<li><a href="#answer5">Open 5. link only</a></li>
</ul>
</div>
</div>
<strong>2. Question 2?</strong> <input type="checkbox" id="question2" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question2"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong>2. Question 3?</strong> <input type="checkbox" id="question3" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question3"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<strong>2. Question 4?</strong> <input type="checkbox" id="question4" value="checked" class="spoilerbutton">
<div class="spoiler">
<label for="question4"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>
<br>
<br>
<br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br><br>
<br>
<strong>2. Question 5?</strong> <input type="checkbox" id="question5" value="checked" class="spoilerbutton">
<div class="spoiler" id="answer5">
<label for="question5"></label>
<div>
<ul>
<li>possible answer 1.</li>
<li>possible answer 2.</li>
<li>possible answer 3.</li>
</ul>
</div>
</div>

Also related How to toggle a checkbox when a link is clicked?

There are some great suggestions there, but I'm unable to adapt the answer from Tushar to my situation.

Solution

  • The following demo is pure HTML/CSS -- not a bit of JavaScript. That includes on-event attributes which many overlook and don't realize that they are JavaScript. Here's two examples:

    <button onclick="jsFunction(this); return false">X</button>

    <a href="#/" onclick="this.value=this.value=='Antwoord'?'Verberg':'Antwoord';">X</a>

    Each Q&A is a hidden checkbox, a collapsed fieldset containing a visible legend and label, and a definition list as the hidden content. visibility: collapse/visible was used for that part.

    We use :target to open the target fieldset when jumping to it. All user interaction and animation works (even the scrolling by using scroll-behavior: smooth) solely by class-centric CSS and strategic HTML layout. No compromises were made using a ton of <br> or using any JavaScript. The only #id used in CSS was a non-essential ruleset so as long as you stick to the layout pattern and class assignments expanding should be painless.

    Update
    HassanSiddiqui has brought to my intention of an edge case see comment below. I say edge case because I don't see a user dwelling on a FAQ so completely that they have a need to go back and use that particular link. Nevertheless, for the sake of completeness, I have updated it with the following:

    1. The label.tgr for Question #5 is initially display:none.

    2. In it's place is a.tgr which targets Question #5's checkbox, input#act5.

    3. Now backup to the link in Question #1 and lets recall what happens there: when that link is clicked fieldset#t5c2 is now and forever :target which makes closing it difficult since input#act5 is unchecked.

    4. So #t5c2 was opened by the link and it's now :target. To remove that sate from #t5c2 a.tgr is clicked making input#act5:target.

    5. So at this point a.tgr will be replaced by label.tgr and #t5c2 is closed. I won't go into more details I'm confusing myself, so just review the CSS.

    Review demo in full page mode, the iframe of the Snippet in the initial compact mode is terribly disproportional.

    html {
  scroll-behavior: smooth;
}

.main {
  height: 300vh;
  padding: 2vh 2vw 30vh;
}

.set {
  overflow: hidden;
  visibility: collapse;
  margin: 2vh 0;
}

.cat {
  max-height: 0;
  font-size: 0;
  opacity: 0;
}

:target .cat,
.act:checked+.set .cat {
  max-height: 100vh;
  font-size: 1rem;
  opacity: 1.0;
  transition: opacity 1s, max-height 0.7s;
}

:target,
.act:checked+.set {
  max-height: 100vh;
  visibility: visible;
  transition: 0.7s
}

.que,
.tgr {
  visibility: visible;
  max-height: 50vh;
  color: #000;
  font-size: 1rem;
  text-decoration: none;
}

.tgr {
  cursor: pointer;
}

.que::before {
  content: attr(data-idx)'. ';
}

.lnx::after {
  content: ' 'attr(title);
}


/* Question 5 Switch Triggers */

#act1:checked~.set .top {
  outline: 3px solid cyan
}

#act5:target+#t5c2 {
  visibility: collapse;
}

#act5:checked+#t5c2 {
  visibility: visible;
}

#t5c2 label.tgr {
  display: none;
}

#act5:target+#t5c2 label {
  display: inline-block;
}

#act5:target+#t5c2 a {
  display: none;
}

#act1:not(:checked)~#act5:not(:checked)+#t5c2:not(:target) a {
  display: none;
}

#act1:not(:checked)~#act5:not(:checked)+#t5c2:not(:target) label {
  display: inline-block;
}
    <form class='main'>

  <input id='act1' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='1'>Question</legend>
    <label class='tgr' for='act1'>Answers</label>
    <dl class='cat'>
      <dt>Category 1A</dt>
      <dd>Topic 1A1</dd>
      <dd>Topic 1A2</dd>
      <dt>Category 1B</dt>
      <dd>Topic 1B1
        <a href='#t5c2' class='lnx' title='Topic 5C2'>Also see</a>
      </dd>
      <dd>Topic 1B2</dd>
    </dl>
  </fieldset>

  <input id='act2' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='2'>Question</legend>
    <label class='tgr' for='act2'>Answers</label>
    <dl class='cat'>
      <dt>Category 2A</dt>
      <dd>Topic 2A1</dd>
      <dd>Topic 2A2</dd>
      <dt>Category 2B</dt>
      <dd>Topic 2B1</dd>
    </dl>
  </fieldset>

  <input id='act3' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='3'>Question</legend>
    <label class='tgr' for='act3'>Answers</label>
    <dl class='cat'>
      <dt>Category 3A</dt>
      <dd>Topic 3A1</dd>
      <dt>Category 3B</dt>
      <dd>Topic 3B1</dd>
      <dd>Topic 3B2</dd>
      <dd>Topic 3B3</dd>
    </dl>
  </fieldset>

  <input id='act4' class="act" type="checkbox" hidden>
  <fieldset class='set'>
    <legend class='que' data-idx='4'>Question</legend>
    <label class='tgr' for='act4'>Answers</label>
    <dl class='cat'>
      <dt>Category 4A</dt>
      <dd>Topic 4A1</dd>
      <dd>Topic 4A2</dd>
      <dd>Topic 4A3</dd>
    </dl>
  </fieldset>

  <input id='act5' class="act" type="checkbox" hidden>
  <fieldset id='t5c2' class='set'>
    <legend class='que' data-idx='5'>Question</legend>
    <label class='tgr' for='act5'>Answers</label>
    <a href='#act5' class='tgr'>Answers</a>
    <dl class='cat'>
      <dt>Category 5A</dt>
      <dd>Topic 5A1</dd>
      <dd>Topic 5A2</dd>
      <dt>Category 5B</dt>
      <dd>Topic 5B1</dd>
      <dd>Topic 5B2</dd>
      <dt>Category 5C</dt>
      <dd>Topic 5C1</dd>
      <dd class='top'>Topic 5C2</dd>
    </dl>
  </fieldset>

</form>