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;
        }

How to target only IE (any version of Internet Explorer) within a stylesheet?

Internet Explorer 9 and lower : There are some conditional comments to load an IE-specific stylesheet for any version (or combination of versions) that we wanted to specifically target. like below using external stylesheet.

<!--[if IE]>
  <link rel="stylesheet" type="text/css" href="all-ie-only.css" />
<![endif]-->

However, beginning in version 10, conditional comments are no longer supported in IE.

Internet Explorer 10 & 11 : Create a media query using -ms-high-contrast, in which we place our IE 10 and 11-specific CSS styles. Because -ms-high-contrast is Microsoft-specific (and only available in IE 10+), it will only be parsed in Internet Explorer 10 and greater.

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {
     /* IE10+ CSS styles go here */
}

Microsoft Edge 12 : We can use the @supports rule Here is a link with all the info about this rule

@supports (-ms-accelerator:true) {
  /* IE Edge 12+ CSS styles go here */ 
}

Inline rule IE8 detection

There are some options but it is only detect IE8 and below version.

  /* For IE css hack */
  margin-top: 10px\9 /* apply to all ie from 8 and below */
  *margin-top:10px;  /* apply to ie 7 and below */
  _margin-top:10px; /* apply to ie 6 and below */

 

 

Source: http://stackoverflow.com/questions/28417056/how-to-target-only-ie-any-version-within-a-stylesheet?answertab=active#tab-top

Easy way to vertically center anything by CSS3

Vertical align by CSS is the thing that I always struggle to fix. Some times succeed and some times not depends on DOM structure of that component. Time, when we use extensively TABLE for layout structure then it was super easy to align element vertically. But the time of CSS when we start DIV base layout then it has become some challenging staff to do.

Anyway, great technique of CSS3 we can solve it with some features like Flex Box, Grid Layout will make this kind of thing even easier. But there is one other way to solve it and it need only three lines of code. Following are the lines:

.do-vertical-center{
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	-ms-transform:translateY(-50%); /* prefix for IE 9 */
	-webkit-transform:translateY(-50%); /* prefix for Safari and Chrome */
}

FYI: When you use position absolute you can apply relative position on parent DOM so that it will positioning from that parent but it depends on your structure.

I hope it will help you and save some time to fix Vertical alignment without table. Indeed!