Pure CSS3 Accordion

Pure CSS3 Accordion! creating CSS3 based accordion can be a tricky task, so in this post I will try to share the concept that how to make it. But indeed we can always use jQuery to include nice effects.

Pure CSS3 Accordion GUI
Pure CSS3 Accordion

The DOM Structure

<section>
   <h3>Auto collapse</h3>
    <ul>
        <li>
            <label>
                <input type="radio" name="auto-collapse" checked="checked" />
                <span class="title">What is Lorem Ipsum?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="auto-collapse" />
                <span class="title">Where does it come from?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="radio" name="auto-collapse" />
                <span class="title">Why do we use it?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
    </ul>
</section>
    
<hr>
    
<section>
   <h3>Manual collapse</h3>
    <ul>
        <li>
            <label>
                <input type="checkbox" name="manual-collapse" checked="checked" />
                <span class="title">What is Lorem Ipsum?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="manual-collapse" />
                <span class="title">Where does it come from?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
        <li>
            <label>
                <input type="checkbox" name="manual-collapse" />
                <span class="title">Why do we use it?</span>
                <span class="detail">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book</span>
            </label>
        </li>
    </ul>
</section>

CSS

* {
            margin: 0px;
            padding: 0px;
        }
        
        hr {
            margin: 20px 0px;
        }
        
        section {
            width: 500px;
            margin: auto;  
        }
        
        h3 {
            margin: 20px 0px;
        }
        
        ul, li {
            list-style: none;
            padding: 0px;
            margin: 0px;
            position: relative;
        }
        
        li {
            margin-bottom: 10px;
        }
        
        input[type="radio"],
        input[type="checkbox"] {
            opacity:0;
            position: absolute;
            top: 20px;
            left: 80px;
        }
        
        .title {
            background: #EFEFEF;
            padding: 10px 20px;
            cursor: pointer;
            display: block;
            border: 1px solid #dddddd;
            border-radius: 3px;
        }
        
        .detail {
            opacity: 0;
            height: 0px;
            border: 1px solid #dddddd;
            display: block;         
        }
        
        input[type="radio"]:checked ~ .title,
        input[type="checkbox"]:checked ~ .title {
            background: #006FC4;
            border: 1px solid #006FC4;
            color: #ffffff;
            border-radius: 3px;
            border-bottom-left-radius: 0px;
            border-bottom-right-radius: 0px;
        }

         input[type="radio"]:checked ~ .detail,
         input[type="checkbox"]:checked ~ .detail {
            opacity: 1;
            height: auto;
            padding: 20px;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s