CSS‑only Q & A lists…
…revisited and reused.
I must be particularly bored to write an article on how collapsible “Q & A” lists can be built with HTML + CSS alone – no scripting.
The CSS was originally written for “Simple Notes” – a simple CSS show/hide function written to pack some additional information into a small space anywhere on a page, were it stays out of the way until someone gets interested and wants to check up on it.
Simple Notes example:
This is “Simple Notes”
for web pages, where for instance the “body” of a single paragraph
gets shown or hidden with a click on top of the note.
The CSS
solution behind “Simple Notes” is basically the same as for the
"show/hide Addendum" function described in this
article.
Reusing blocks of CSS makes sense, and to reuse “Simple Notes” more widely I only had to modify and simplify its CSS selector‐chains to handle both individual elements and series, as two variants of the same set of functions.
Demos, descriptions and code are spread over a number of slides. Navigate between slides by clicking on arrows below / right.
Slides can also be opened all at once, if that suits you better.
1(5): demo.
The following example is an actual Q & A list, that answers many
questions you may have about how my “Simple Notes” show/hide method
works on lists. Many questions you don't have may also have their answers there,
but you do of course not have to read those.
So,
check it out.
Q & A about a CSS-only show/hide technique.
- A: this is “Simple Notes” for web pages, where in this case the “body” of a single list-item gets shown or hidden with a click on top of that list-item.
- A: “Simple Notes” can be used to build up regular “Q & A” pages with accordion functionality with markup + CSS alone. And there are of course lots of other tasks for which CSS accordions come handy.
-
A: yes, “Simple
Notes” can be nested. Next level is in place below.
-
A: the
CSS selector‐chain is sequenced to repeat “show/hide” action
one level past actual level, and this “overshooting CSS
selector‐chains” means the HTML selector‐chain in theory can
be nested as many levels down as one wants.
-
A:
yes. Make sure the HTML nesting is valid though, or else all bets are off.
-
A:
sure, no problem. The clever thing about “overshooting CSS
selector‐chains” is that no changes has to be made in CSS in order
to nest, not even if we decide to nest deeper at a later date.
- A: yes, yes, as deep as you care to go. But this nesting is ridiculously deep already, and I see no point in going further in this demo.
-
A:
sure, no problem. The clever thing about “overshooting CSS
selector‐chains” is that no changes has to be made in CSS in order
to nest, not even if we decide to nest deeper at a later date.
-
A:
yes. Make sure the HTML nesting is valid though, or else all bets are off.
-
A: the
CSS selector‐chain is sequenced to repeat “show/hide” action
one level past actual level, and this “overshooting CSS
selector‐chains” means the HTML selector‐chain in theory can
be nested as many levels down as one wants.
-
A: yes,
both input=checkbox and input=radio can be used, but not mixed at the same
level.
Demonstrations of both variants are shown in side-notes / other column. -
A: yes,
there are. Since
INPUT
can not be turned fromchecked
tounchecked
in CSS, there are some functional weaknesses.
One obvious weakness is that once one item with input=radio has been opened, one item at that level will always stay open. A “dummy” item with input=radio can be used to hide other, real, items with input=radio, but that solution is of course not perfect. - A: how should I know … I just work here.
- Hope you like my answers.
This article provides the code and description necessary to create lists that function like the one above. It does not provide much when it comes to visual appearance, as much of that is contributed with site‐wide styles.
The way this series of items containing questions and presenting answers is styled here, makes it work with unordered and ordered lists, and with any other valid combination of elements in the right order.
2(5): HTML.
Below is the actual HTML used in demo on previous slide, minus loads of content.
well‐nested list:
01: <ul class="note-v2 qa ha-5 sh-1"> 02: <li><input type="checkbox" name="c1" id="c1" /> 03: <label for="c1"><b>Q:</b> what is this?</label> 04: <span><b>A:</b> this is “Simple 05: Notes” for web pages, …</span> 06: </li> 07: 08: <li><input type="checkbox" name="c1" id="c2" /> 09: <label for="c2"><b>Q:</b> what is it for?</label> 10: <span><b>A:</b> …</span> 11: </li> 12: 13: <li><input type="checkbox" name="c1" id="c3" /> 14: <label for="c3"><b>Q:</b> can it be nested?</label> 15: <span><b>A:</b> yes, …</span> 16: 17: <ul class="note-v2 qa"> 18: <li><input type="checkbox" name="c1" id="c31" /> 19: <label for="c31"><b>Q:</b> how does deep nesting work?</label> 20: <span><b>A:</b> …</span> 21: 22: <ul class="note-v2 qa"> 23: <li><input type="checkbox" name="c1" id="c311" /> 24: <label for="c311"><b>Q:</b> so it can be nested deeper than this?</label> 25: <span><b>A:</b> …</span> 26: 27: <ul class="note-v2 qa"> 28: <li><input type="checkbox" name="c1" id="c3111" /> 29: <label for="c3111"><b>Q:</b> all the way to fifth level?</label> 30: <span><b>A:</b> …</span> 31: 32: <ul class="note-v2 qa"> 33: <li><input type="checkbox" name="c1" id="c31111" /> 34: <label for="c31111"><b>Q:</b> all the way to sixth?</label> 35: <span><b>A:</b> yes, ….</span> 36: </li> 37: </ul> 38: </li> 39: </ul> 40: </li> 41: </ul> 42: </li> 43: </ul> 44: </li> 45: 46: <li><input type="checkbox" name="c1" id="c4" /> 47: <label for="c4"><b>Q:</b> can input=radio be used?</label> 48: <span><b>A:</b> …</span> 49: </li> 50: 51: <li><input type="checkbox" name="c1" id="c5" /> 52: <label for="c5"><b>Q:</b> are there any weaknesses?</label> 53: <span><b>A:</b> …</span> 54: </li> 55: 56: <li><input type="checkbox" name="c1" id="c6" /> 57: <label for="c6"><b>Q:</b> who needs this?</label> 58: <span><b>A:</b> …</span> 59: </li> 60: 61: <li><b class="tac">Hope you like my answers.</b> 62: </li> 63: </ul>
3(5): CSS.
All relevant styles to make my collapsing lists work, are found below.
What isn't here – especially missing CLASS
es found in HTML
on previous slide – are general site wide styles attached to make it look
the way I want. We all style our lists different to go with our designs
(unless we copy everything verbatim from others), so you have to come up with
your own visual styling if you want to use any of this stuff.
main CSS:
01: /* "Simple Notes" hide/show w/INPUT radio/checkbox. 02: - note-v1 used on single elements, 03: - note-v2 used on wrappers */ 04: 05: .note-v1, 06: .note-v2>* {position: relative;} 07: 08: .note-v1>input, 09: .note-v2>*>input {display: block; height: 2em; width: 100%; 10: position: absolute; top: -3px; left: -4px; z-index: 1; opacity: .01;} 11: 12: .note-v1>input:hover, 13: .note-v2>*>input:hover {cursor: pointer;} 14: 15: .note-v1>input:hover+*, 16: .note-v2>*>input:hover+* {text-shadow: 1px 1px 0 #888, -1px -1px 0 #fff;} 17: 18: .note-v1>input+*, 19: .note-v2>*>input+* {display: block; text-shadow: 1px 1px 0 #fff, -1px -1px 0 #bbb;} 20: 21: .note-v1>input+*>img.flr {margin: -.3em -.5% -.1em 10px!important;} 22: 23: .note-v1>input+*+*, 24: .note-v2>*>input+*+*, 25: .note-v2>*>input+*+*+* {height: 1px; position: absolute; top: -10000px; 26: left: -5000px; overflow: hidden; display: block; opacity: 0.01;} 27: 28: .note-v1>input:checked+*, 29: .note-v2>*>input:checked+* {border-bottom: solid 1px #999;} 30: 31: .note-v1>input:checked+*.empty, 32: .note-v2>*>input:checked+*.empty {border-bottom: none;} 33: 34: .note-v1>input:checked+*+*, 35: .note-v2>*>input:checked+*+*, 36: .note-v2>*>input:checked+*+*+* {height: auto; position: static; 37: overflow: visible; padding: .2em 0 .1em; opacity: 1; margin: .3em 0 .1em;} 38: 39: .note-v1>input:checked+*+*>a, 40: .note-v2>*>input:checked+*+*>a {position: relative; z-index: 2;}
The “overshooting CSS selector‐chains” that are all‐important on nested lists, are found on line 25: for “hide” and on line 36: for “show”.
nested list type style CSS:
01: .note-v2, 02: .note-v2 li {list-style: none; clear: both;} 03: 04: ul.note-v1.qa>input+*+*, 05: ul.note-v2.qa>*>input+*+* {margin-left: .25em; padding-left: .25em; 06: border-left: solid 1px #bbb; border-bottom: solid 1px #bbb;}
For “Q & A” list style I adjust indentation, and add
some borders – all to make such lists look right. For that I added
a .qa CLASS
(line 04: - 05:) to the regular list style
selector‐chain.
4(5): some details.
Extracting a few details and (trying to) explain hows and whys.
list type style HTML – elements used:
01: <ul class="note-v2 qa ha-5 sh-1"> 02: <li><input type="checkbox" name="c1" id="c1" /> 03: <label for="c1"><b>Q:</b> what is this?</label> 04: <span><b>A:</b> this is “Simple 05: Notes” for web pages, …</span> 06: </li> 07: … 60: 61: <li><b class="tac">Hope you like my answers.</b> 62: </li> 63: </ul>
This is not a FORM
, so LABEL
can be replaced
by any valid element here and it will work the same visually and be technically
valid. As I use universal selectors wherever possible throughout CSS
selector‐chains, what HTML elements that are used doesn't make much of
a difference.
Still, it makes sense to mark it up with LABEL
directly after INPUT
to establish proper relationship between
elements used. After all, not everything is about visual performance in web
design.
I “count up” the INPUT
's ID
from one list-item to the next, to connect each LABEL
to its own
INPUT
. When nesting I add a digit to the ID
,
so first child of list-item two will for instance get an ID
of
“c21”.
A SPAN
is used as “content body”, placed directly
after LABEL
to establish connection for “hide/show”
function coded in CSS.
All valid elements can be used inside “content body”. I use
SPAN
, B
, IMG
here.
5(5): final thoughts.
A few thoughts around factors that may complicate things unnecessary for less savvy web designers / front‐end coders.
always nest lists properly!
I have seen so much strange list nesting over the years, that I see the need to make a point out of proper nesting. Although browsers usually manage to make the strangest nesting appear as intended – thanks to built-in Error Correction, styling incorrectly nested lists can be a nightmare.
CSS presented on these slides, will only work correctly with correctly nested lists. Whatever strange nesting that may be made to work by modifying CSS, simply doesn't matter … period!
HTML5 isn't an issue here.
HTML5 gets hyped by some, and of course I have no problems with that. What does irritate me a little is when newbee web designers / coders claim that today's documents must be marked up in HTML5, and that anything else is obsolete, plain wrong, and of no interest to them. Oh, well…
I do use XHTML 1.0 Strict markup on this site, and will probably continue to do so well into the future for the simple reason that it works for me.
Anyone interested can replace the present document heading in my pages…
<?xml version="1.0" encoding="utf-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta name="generator" content= "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" />
…with the following HTML5 DOCTYPE
, and change or remove
relevant metas as follows…
<!DOCTYPE html> <html lang="en-us"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="generator" content= "HTML Tidy for Windows (vers 25 March 2009), see www.w3.org" />
…and what we get is a perfectly valid HTML5 marked up document.
It is only when new
HTML5 elements are used in a page, that switching from an XHTML 1.0
Strict to an HTML5 DOCTYPE
matters. I do switch
DOCTYPE
for pages for that very reason now and then, but am
otherwise for various reasons quite happy with what I can do under an XHTML
1.0 Strict DOCTYPE
.
one more down.
Cannot say that I worked hard on this one. Have had the “Simple Notes” code around for a while, and turning it into something more was not difficult once I found uses for it.
I have found that the difficult part is to come up with reasonably good uses for web design solutions, not to make them work. Thus, I think it is better to work more on my imagination in the field of usefulness, rather than to actually code down solutions.
(05.aug.2022) Apart from feeling the need for minor realignment of a few visual details in the page
lost to sitewide upgrades over the years – none of which was/is directly related to the described examples, this article
w/content, examples and all, has held up quite well since it was written, with everything working as intended.
If anything; maybe the “slide arrow” image could do with a redesign‥?
sincerely
Hageland 03.nov.2013
15.nov.2013 - added support/bug note in sidenotes.
15.jan.2014 - updated "support and bug check" in sidenotes.
05.aug.2022 - realigned a few visual details, and added comments.
last rev: 05.aug.2022
side notes.
more demos.
So many things “Simple Notes” can be used for. Here follow two examples of how compact photo albums, with and without text, can be included in a page.
First example uses checkbox
, second example uses
radio
. Both examples are otherwise identically marked up, and use
same CSS as the demo in main article.
open any and all.
-
Today the sun will shine, clouds will form, rain will fall, and thunder will
roll – somewhere.
So cheer up, and remember to always look on the bright side of life. - People may read as much as before, but more and more prefer books in digital form so sales of paper books are down.
-
“I don't know what “animalicity” means, but if it
doesn't taste as good as the green, lush, grass out there on my pastures
I am pretty sure I won't like it.”
– Britt no:0086 - “Wonder how deep I have to dig to keep grandpa's bones safe from them there archeologists.” – Dino
- “Go wash up somewhere else. This sink is occupied till tomorrow morning.” – Burpen
- the end
open one at a time.
-
Today the sun will shine, clouds will form, rain will fall, and thunder will
roll – somewhere.
So cheer up, and remember to always look on the bright side of life. - People may read as much as before, but more and more prefer books in digital form so sales of paper books are down.
- “I don't know what “animalicity” means, but if it doesn't taste as good as the green, lush, grass out there on my pastures I am pretty sure I won't like it.”– Britt no:0086
- “Wonder how deep I have to dig to keep grandpa's bones safe from them there archeologists.”– Dino
- “Go wash up somewhere else. This sink is occupied till tomorrow morning.” – Burpen
recycled.
The “Simple Notes” may be one of the most recycled and reused
bits of HTML
+ CSS
I have come up with since I launched this site back
in 2010. Pity I could not use something like it when I launced my other site back in 2002.
About time I came up with something new and potentially useful … but that is kind of hard after so many years.
support and bug check…
- IE9 & IE10, OK.
- Firefox - 19.0.2, OK.
- Opera - 12.16 (Presto), OK.
- Opera - 17.0.1241.53, OK.
- Google Chrome - 31.0.1650.57, buggy. Can not open hidden segments for any but the Q & A demo in main article. Buggy behavior confirmed in this version.
- Opera - 18.0.1284.68, buggy. Same as Chrome 31. Buggy behavior confirmed in this version.
- Opera Developer - 19.0.1310.0, buggy. Same as Chrome 31. Buggy behavior confirmed in this version.
- Google Chrome - 32.0.1700.76, OK.
- Opera - 19.0.1326.59, OK.
I ain't gonna waste time on working around browser bugs that are or will be fixed in later browser versions.
(05.aug.2022) Nothing bugging the solutions described and exemplified on this page, in any of the major browsers as we write the year 2022.