Content Accordion in Pure CSS3
Very clean and cool Content Accordion that works on all browsers and devices that support the :target selector. It's based on a tutorial from DesignModo. Basically, there are three divs with different ids and a link in them with their href attribute same as their parent div's ids. This helps in targeting the divs (tabs) when the respective link is clicked.
Initially, the content div is hidden by setting its display property to none. When the link is clicked, the display property of the respective content div is set to block so that it shows up. While making it visible, the main tab div is animated using transition CSS3 property which changes it's height from 40px to 360px to create a slide effect.
Also, it's good to note that the other tabs will return to their original closed state when a new tab is clicked. This is done automatically by the :target selector. Take a look at the code to understand what's happening!