Here’s the basic markup

<li>
<video>...</video>
<p>...</p>
</li>

I wanted the paragraph to appear when the video is selected. So here’s the simple CSS

section#videolist li {
	position:relative;
}
section#videolist li p {
	display:none;
	position:absolute;
	bottom:-100px;
	left:0;
}
section#videolist li video:focus+p {
	display:block;
}

The sibling selector (+) is telling the browser to display the paragraph as block when its video brother has focus. This is a rough test. There could be some accessibility issues and I’ll need to test this out. Obviously this will not work in Internet Explorer.

And don’t forget to keep your libraries updated!

Simple HTML Example

CSS solution

You can include multiple medias in one style sheet. Just declare the special rules under @media


@media print{/*show printer only elements, hide screen only elements */
.noprint {display:none;}
.print {display:block;}
}


Your main CSS file would have already declared .print {display:none;}.

This is about using a Definition List and the DOM to create a nice FAQ page where clicking on the DTs (the questions) “toggles” the associated DDs (the answers).

Note: If you’re already using this solution, please check your version number (this is version 1.5.4). Before you download the newest version I suggest to go through the entire article again (since a few things have changed).

This is what it does:

Open AllClose All

Question 1?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals.

Question 2?

To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed.

Question 3?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed. The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach.

Question 4?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To ensure that non-operating cash outflows are assessed.

Question 5?

The vitality of conceptual synergies is of supreme importance exploiting the productive lifecycle working through a top-down, bottom-up approach. To focus on improvement, not cost, from binary cause and effect to complex patterns, while those at the coal face don’t have sufficient view of the overall goals. To ensure that non-operating cash outflows are assessed.

The main advantages of the basic technique (related to the DL):

• It uses semantic markup.
• It degrades nicely (hidden elements are visible in script-disabled UAs).
• DTs do not appear as links without script support.
• It does not use inline event attribute (onclick()).
• It does not require A elements in the markup.
• It is screen-readers “friendly”.
• It is keyboard “friendly”.
• It is IE Mac compatible.
• It relies on one single hook.
• It allows the author to add/move/delete DT/DD pairs easily (there is no variable in the script to edit and there are no class or ID to include nor change).
• It is “powered” by a very light script (3Kb).

About the “Show All/Hide All” “links”:

• they let the user expand all answers at once, so it is possible to search the document.
• they are hidden from Javascript-challenged browsers.
• they can be “Named Anchors”, images or SPANs (actually they can be any inline elements or any other elements styled as inline).

This is more or less a plug-and-play solution (script and stylesheets are at the bottom of this page).
You’ll need to:

1. Create a Definition List (do not use more than one DD per DT.); the markup for the one above looks like this:

   Question 1

   The vitality of conceptual synergies...

   Question 2

   To focus on improvement, not cost, ...

   Question 3

   The vitality of conceptual synergies...

   Question 4

   The vitality of conceptual synergies...

2. Assign a specific ID to your DL:
   
<dl id="TJK_DL" />

3. Download this ZIP File (3Kb) and unzip its content in the same directory as your FAQ page.
4. In your FAQ page, right above the closing headtag cut and paste the following:
   <script type="text/javascript" src="TJK_ToggleDL/TJK_ToggleDL.js"></script>
5. Call the script, for example using:

   <body onload="TJK_ToggleDL()">

   Note: In case you want to add multiple onload handlers to a page, make sure to read executing JavaScript on page load.

6. In order to use the “Show All” / “Hide All” feature, you will need to create 2 named anchors with specific IDs (TJK_ToggleON and TJK_ToggleOFF). Dreamweaver users can take advantage of the “Named Anchor” icon in the toolbar to easily create the required markup. Dreamweaver will plug the name attribute as well, but that’s OK, you can either delete it or ignore it.
   This is the markup I’m using in this page:

   <a id="TJK_ToggleON">Open All<<a id="TJK_ToggleOFF">Close All</a>

   Note: adjacent anchors are confusing in text-browsers.

   You can also replace these Named Anchors with other inline elements, for example SPAN or IMG (yes, images). Just make sure to set the proper IDs.

7. Because we want to hide these “links” from script-challenged UAs, you need to include the following rule somewhere inside your stylesheet:

   #TJK_ToggleON,#TJK_ToggleOFF {display:none}

   Note: You can also use a style element to include this rule in the head of your document (your FAQ page).

You’re done!

Feel free to edit the rules in the CSS file to fit your needs.

Note: in case your questions are more than one line long, you may want to change this: “background:0 50%” to this: “background:0 0″ and add “display:block” to the #TJK_DL dt a {} rule (to avoid any “wrapping”).

For the curious

TJK_ToggleDL.js

TJK_ToggleDL.css

Note: “cursor:hand” is for IE5 Win, but this declaration will make this sheet fail Validation. If Validation is important to you, you can either delete this declaration or move it inside a Conditional Comment.

TJK_ToggleDL_ie5mac.css

For the DOM police

Earlier versions of this script did not use document.write(), I was using the DOM to plug the stylesheets in the HEAD element. Unfortunately, setting the rel attribute of the LINK element makes Safari “go blank” and STYLE fails in IE Win. So, I decided to go with what works!

This script should work in HTML and XHTML documents.