Last active
February 23, 2023 12:19
-
-
Save badcommandorfilename/37c25c1a6199343a96724c26c58256f4 to your computer and use it in GitHub Desktop.
html html5 css read more break divider section
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!-- Pure HTML5 CSS simple "Read More" break to hide all elements after a clickable section--> | |
| <style> | |
| label.more { | |
| display: inline-block; | |
| width: 100%; | |
| border-bottom: 1px solid black; | |
| text-align: center; | |
| } | |
| label.more+input:checked ~ * { | |
| display: none; | |
| } | |
| label.more+input { | |
| visibility: hidden; | |
| max-height: 0px; | |
| } | |
| </style> | |
| <div> | |
| <p>Before Break</p> | |
| <label for="box" class="more"> | |
| <a class="button"> | |
| Read More... | |
| </a> | |
| </label> | |
| <input id="box" value="true" type="checkbox"/> | |
| <p>After Break</p> | |
| <p>More Stuff</p> | |
| </div> | |
| <p>Outside Div</div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
ertyuio