Custom Accordions

Unknown Primer

FancyTuesday

---

• Accordions with CSS
• Accordions with HTML

This is an example of some customized accordions using CSS, only using HTML to link to the stylesheet. The code used in my description to produce the accordions below is exactly the code I've laid out below the accordions.

Pros	Cons
Browser editing is very clean	Requires hosting and editing of external files
Allows you to change element behaviors when active/moused over
Greater control over the rest of the page & related elements

---

Accordion One

Body for accordion one.

Accordion Two

Body for accordion two.

Description:

===accordion ===panel:Accordion One Body for accordion one. ===endpanel ===panel:Accordion Two Body for accordion two. ===endpanel ===endaccordion

CSS:

.well .panel-default:first-child .panel-heading { background-image: url('http://i.imgur.com/vyVrWuO.jpg'); background-position: center top; } .well .panel-default:nth-child(2) .panel-heading { background-image: url('http://i.imgur.com/vyVrWuO.jpg'); background-position: center bottom; } .well .panel-title { font-family: Georgia, serif; font-weight: 900; text-shadow: 0 0 2px black, 0 1px 3px black, 0 2px 4px black; color: green; }

This is an example of some customized, collapsible accordions using just HTML. The code used in my description to produce the accordions below is exactly the code I've laid out below the accordions.

Pros	Cons
No mucking about with hosting or linking to files	Kind of a mess to keep track of when editing in browser
	No control over states like hover, active, etc.

---

Accordion One

Body for accordion one.

Accordion Two

Body for accordion two.

Accordion One

Body for accordion one.

Accordion Two

Body for accordion two.

Date added	8 years
Last updated	5 years
Legality	This deck is not Unknown legal.
Cards	0
Folders	Tutorials & Examples, The King's Aids, CSS Page Styling, Templates, Tutorials & CSS, Coding, Guides and Tutorials, Useful Stuff