Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- I would use a checkbox instead so you can just use a label if you want to link to it:
- <!-- begin snippet: js hide: false console: true babel: false -->
- <!-- language: lang-css -->
- .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;
- }
- <!-- language: lang-html -->
- <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="#question2"><label for="question2">Open 2.</label></a></li>
- <li>possible answer 2.</li>
- <li>possible answer 3.</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>
- <!-- end snippet -->
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement