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.
