 |
add collapse section example - jscancer - Javascript crap (relatively small) |
 |
git clone git://git.codemadness.org/jscancer |
 |
Log |
|
Files |
|
Refs |
|
README |
|
LICENSE |
|
--- |
|
commit ae56b6d42c2b6f576b95d9f07c073ee36c2d18b2 |
|
parent c21a836b3fdce10d7bc108ab11b77c80e2bbc82a |
|
Author: Hiltjo Posthuma <[email protected]> |
|
Date: Fri, 19 Jul 2019 11:35:01 +0200 |
|
|
|
add collapse section example |
|
|
|
uses no javascript and optional CSS. |
|
|
|
Diffstat: |
|
A collapsesection/README | 3 +++ |
|
A collapsesection/example.html | 19 +++++++++++++++++++ |
|
|
|
2 files changed, 22 insertions(+), 0 deletions(-) |
|
--- |
|
diff --git a/collapsesection/README b/collapsesection/README |
|
@@ -0,0 +1,3 @@ |
|
+An example to collapse a section using semantic HTML. |
|
+ |
|
+This does not need any Javascript. CSS is optional. |
|
diff --git a/collapsesection/example.html b/collapsesection/example.html |
|
@@ -0,0 +1,19 @@ |
|
+<style type="text/css"> |
|
+details summary { |
|
+ cursor: pointer; |
|
+} |
|
+details[open] { |
|
+ color: #333; |
|
+} |
|
+details[open] div { |
|
+ margin-left: 1em; |
|
+ border: 1px solid #000; |
|
+} |
|
+</style> |
|
+ |
|
+<details open> |
|
+ <summary>Some summary, click to expand</summary> |
|
+ <div> |
|
+ <p>Some text</p> |
|
+ </div> |
|
+</details> |
