CSS show/hide more information using the 'radio' method

13th February 2014

IE9+, Firefox, Safari, Chrome, Opera, Android browser, iOS, touch screens, tablets and smartphones


Frequently Asked Questions at CSSplay

Every page has its own comments. The links is situated at the top of the page under the main menu. You will find a row of navigations to move back and forward through the demonstrations, the one labelled COMMENTS is the page comments link.

Most of my demonstrations can be used without asking for permission. However, some will require email approval first. Just check each page for the copyright requirements before use.

A list of the recommended DTDs can be found at the following link: Recommended DTDs to use in your Web document.

If you are having problems with your menu dropping down over a flash object then an answer can be found here FAQ: Navigation (flyout) menus are covered up by other things on the page

Switch on quirks mode by using <?xml version="1.0" encoding="UTF-8"?> which will leave quirks mode on in IE5.x and IE6 but use standards compliant mode for IE7.

If you are using php to generate your page then it sees <?xml version="1.0" encoding="UTF-8"?> as php and generates a parse error.
Use <?php echo '<?xml version="1.0" encoding="UTF-8"?>'; ?> instead.

If there is a tutorial for a particular demonstration then the 'TUTORIAL' link under the main menu at the top of the page will be selectable.

I have had many emails asking where the code/style, zip file can be downloaded for the various demonstrations.
Well there is no download facility. The (x)html is always placed in the #info div, so examine the source code, find the <div id="info">.....</div> and in between is the 'code'.
In most case the style is embeded in the page <head>...</head>. This is done to keep it all together on the same page making it easier to find. In some cases the css is held in a separate file (where it should be) and is loaded in the normal way <link rel="stylesheet" media="all" type="text/css" href="path to css file.css" /> so just add this path to the address in your browser to see the css file.

You are probably running a standalone version of IE6 on the same PC as IE7. If this is the case then IE6 will think that it is IE7 as far as the conditional comments are concerned. Because of this IE6 gets the IE7 specific code instead of the IE6 specific code and will not be able to show the sub levels. You will need to test this on a PC that is not running IE7.

IE8 is very temperamental when it comes to multi-level demonstrations and menus (not just mine). I will be going through my demonstrations over the coming months to get them to work in IE8 but in the mean time the easiest way is to switch IE8 into IE7 emulation mode which will cures all problems.
To do this add the following meta tag immediately afer the <head> tag:
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

copyright © stu nicholls - CSS play

Information

A simple question and answer that is used to toggle the answers when clicking the questions.

This is generally seen using jQuery/javascript, but this version uses only CSS and works in all modern browsers and operating sysytems.

IE9 will see an instant display of the answers, whereas all other browsers will see the answers slide down into view.

The code is simply a form checkbox and label for the questions and a paragraph for the answers:



And the stylesheet is simply:

label.faq {display:block; font:normal 15px/20px 'texgyreadventorbold', 'lucida sans', arial, sans-serif; color:#069; cursor:pointer; padding:10px 0 0 0;}
label.faq + input {position:absolute; display:none;}
label.faq + input + p {padding:0; margin:0; font:normal 13px/20px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; color:#666; height:0; overflow:hidden;
-webkit-transition:0.25s ease-in-out;
-moz-transition:0.25s ease-in-out;
-o-transition:0.25s ease-in-out;
transition:0.25s ease-in-out;
}
label.faq + input:checked + p.one {height:20px;}
label.faq + input:checked + p.two {height:40px;}
label.faq + input:checked + p.three {height:60px;}
label.faq + input:checked + p.six {height:120px;}
label.faq + input:checked + p.seven {height:140px;}

If you do not want the slide animation for the answers then the stylesheet can be simplified:

label.faq {display:block; font:normal 15px/20px 'texgyreadventorbold', 'lucida sans', arial, sans-serif; color:#069; cursor:pointer; padding:10px 0 0 0;}
label.faq + input {position:absolute; display:none;}
label.faq + input + p {padding:0; margin:0; font:normal 13px/20px 'texgyreadventorregular', 'lucida sans', arial, sans-serif; color:#666; height:0; overflow:hidden;}
label.faq + input:checked + p {height:auto;}


Copyright

You may use this method on your personal 'non-profit' web site without seeking my permission. A link back to CSSplay is always appreciated.

Commercial usage is also permitted without seeking approval, but I would ask that a donation is considered to support my work on CSSPlay.

If you are having problems integrating any of my demonstrations into your website then I now offer a service to fault find and correct any errors that you may have introduced. Please email me for more information.



Please Support CSS play

Please note that if your donation is for a demo/menu then you will need to email me with the url of the demo/menu after making the donation

For more CSS demonstrations I recommend that you visit the Dynamic Drive CSS Library.


Free, practical CSS menus, layouts, and examples

Follow CSS play


Facebook   Twitter   Facebook Fan Page