Snap Builder Public Codes Library
Snap | Generators | Login | Browse | Search | Enter Code | Export Snap Builder Public Codes Library

 

Category: Cascading Style Sheets (HTML5 - SCSS - CSS3 & CSS) >> Tabs & Accordion >> CSS3 Accordion Content Boxes


Code Snippet </> Info


Snippet Name: CSS3 Accordion Content Boxes

Description: A simple CSS3 accordion content box that allows you to hide content until needing to be viewed.
Example: View Code Demo

Note:

Author: SnapBuilder <snippets@snapbuilder.com>

Last Modified: 2015-08-26 22:51:09

Language: css

Highlight Mode: css

Copy Codes: Use Free Notepad ++
Bookmark and Share

Snap HTML Code Editor:
Paste the source code, make changes and instantly see it in live preview.
Snap HTML Code Editor


  About Copying
Copied To Clipboard!

<!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"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Pure HTML5 CSS3 Accordion Content Boxes</title> <meta name="description" content="CSS based accordion effect that uses the target pseudo class and webkit transitions to animate the showing and hiding" /> <meta name="robots" content="all" /> <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0"> <style> /* Begin Pure HTML5 CSS3 Accordion Content Boxes */ /* == This Script Free To Use Providing This Notice Remains == */ /* == This Script Has Been Found In The http://snapbuilder.com Free Public Codes Library == */ /* == NOTICE: Though This Material May Have Been In A Public Depository, Certain Author Copyright Restrictions May Apply == */ *, html {font-family:verdana, arial, helvetica, sans-serif;} html {font-size: 100%; height: 100%;} /* IE hack */ body {font-size: 0.75em;} /* Base font 12px */ body, p, h1, h2, h3 {margin:0; padding:0;} body {padding:60px 20px 0px 20px; color:#ffff00; background-color:#606061;} a {color:#69C; text-decoration:none;} a:hover {color:#F60;} p {font-size:1em; margin:0 0 1em 0;} /* CSS Accordion styles */ dl {padding:10px; min-width:960px;} dl dt {-webkit-border-radius:5px;-moz-border-radius:5px;border-radius:5px;border:1px solid #cccccc;margin:0;} dl dt a {color:#ffffff;font-weight:bold;text-decoration:none;padding:10px;display:block;} dl dt + dd:first-child {height:auto;} dl dd {color:#cccccc;margin:0;overflow:hidden;-webkit-transition:height 1s ease;-moz-transition:height 1s ease;-o-transition:height 1s ease;} dl dd p {padding:10px;margin:0;} dl dd:not(:target) {height:0;} dl dd:target {height:6.667em;} dl a.ie:hover dd, dl a.ie:focus dd {height:auto;color:#cccccc !important;} </style> </head> <body> <h3>CSS3 Accordion Content Boxes</h3> <p>Click on any section link below to view the accordion content box open.</p> <dl> <dt><a href="#Section1">Section 1</a></dt> <dd id="Section1"> <p> This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. </p> </dd> <dt><a href="#Section2">Section 2</a></dt> <dd id="Section2"> <p> This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. </p> </dd> <dt><a href="#Section3">Section 3</a></dt> <dd id="Section3"> <p> This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. </p> </dd> <dt><a href="#Section4">Section 4</a></dt> <dd id="Section4"> <p> This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. This is just some rambling text placed here to provide enough text for this codes demonstration purpose. </p> </dd> </dl> <p>[ This code example from <a href="http://snapbuilder.com/code_snippets/copy_code_snippet_222.html">Pure HTML5 CSS3 Accordion Content Boxes Code Snippet</a> page. ]</p> </body> </html>


[ Snippet Options ]

 

© 2002 -  Snap Builder Public Codes Library