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.

some content hidden from older browsers

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 function­ality 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: 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 from checked to unchecked 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.
some content hidden from older browsers

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 CLASSes 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.

My HTML Tidy manages HTML5 quite well now anyway, so not much to worry about but the usual typing errors around here.

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.

sincerely  georg; sign

Hageland 03.nov.2013
15.nov.2013 - added support/bug note in sidenotes.
15.jan.2014 - updated "support and bug check" in sidenotes.
last rev: 15.jan.2014


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 “animal­icity” 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 archeo­logists.” – Dino
  • “Go wash up some­where else. This sink is occupied till tomorrow morning.” – Burpen
  • the end
some content hidden from older browsers
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 “animal­icity” 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 archeo­logists.”– Dino
  • “Go wash up some­where else. This sink is occupied till tomorrow morning.” – Burpen
some content hidden from older browsers

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.


www.gunlaug.com advice upgrade advice upgrade navigation