CSS3-only horizontal accordion using the :target selector

The following accordion control is implemented using CSS3 only. It works in IE9, Firefox, Chrome, Safari and Opera.

Title One

This content appears on page 1.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.

next ➧

Title Two

This content appears on page 2.

Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.

next ➧

Title Three

This content appears on page 3.

Sed et diam eu ipsum scelerisque laoreet quis in nibh. Proin sodales augue lectus. Maecenas a lorem a mi congue pharetra. Sed sed risus in nisi venenatis condimentum. Donec ac consectetur arcu.

next ➧

Title Four

This content appears on page 4.

Fusce ullamcorper orci vel turpis vestibulum eu congue nisl euismod. Maecenas euismod, orci non tempus fermentum, leo metus lacinia lacus, nec ultrices quam ligula ac leo.

next ➧

Title Five

This content appears on page 5.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum lacinia elit nec mi ornare et viverra massa pharetra. Phasellus mollis, massa sed suscipit pharetra.

next ➧

More information

For further details and code explanations, please please refer to:
How to Create a CSS3-Only Horizontal Accordion Using the :target Selector

This example code was developed by Craig Buckler of OptimalWorks.net for SitePoint.com.

Please use this code as you wish. A link back to the article is appreciated.