Css Accordion

For Example, Css Accordion...

Demo

  • Lorem ipsum dolor sit amet

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.

  • Sed ut perspiciatis

    Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.

  • At vero eos et accusamus et

    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.


HTML

<ul class="css-accordion">
        <li>
                <input name="accordion" type="radio" checked>
                <i></i>
                <h2>Lorem ipsum dolor sit amet</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</p>
        </li>
        <li>
                <input name="accordion" type="radio">
                <i></i>
                <h2>Sed ut perspiciatis</h2>
                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</p>
        </li>
        <li>
                <input name="accordion" type="radio">
                <i></i>
                <h2>At vero eos et accusamus et</h2>
                <p>At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga.</p>
        </li>
</ul>

CSS

<style>
        p,
        ul.css-accordion li i:before { 
                -webkit-transition: all 0.25s ease-in-out; 
                transition: all 0.25s ease-in-out; 
        }
        h1, ul.css-accordion li { 
                -webkit-animation: flipdown 0.5s ease both; 
                animation: flipdown 0.5s ease both; 
        }
        ul.css-accordion { 
                list-style: none; 
                padding: 0; 
                margin: 0; 
                -webkit-perspective: 900; 
                perspective: 900; 
        }
        ul.css-accordion li { 
                position: relative; 
                margin: 0; 
                padding:15px 0 4px; 
                border-top:1px solid #dddddd; 
        }
        ul.css-accordion li:nth-of-type(1) { 
                -webkit-animation-delay: 0.5s; 
                animation-delay: 0.5s; 
        }
        ul.css-accordion li:nth-of-type(2) { 
                -webkit-animation-delay: 0.75s; 
                animation-delay: 0.75s; 
        }
        ul.css-accordion li:nth-of-type(3) { 
                -webkit-animation-delay: 1s; 
                animation-delay: 1s; 
        }
        ul.css-accordion li:last-of-type { 
                padding-bottom: 0; 
        }
        .css-accordion li h2 { 
                font-size: 24px; 
                color: #333; 
                line-height: 34px; 
                font-weight: 300; 
                display: block; 
                cursor: pointer; 
                margin-bottom: 0; 
                padding-right:30px; 
        }
        .css-accordion li p { 
                position: relative; 
                overflow: hidden; 
                max-height: 0; 
                opacity: 0; 
                margin-top: 0; 
                z-index: 2; 
                padding-bottom:10px; 
        }
        ul.css-accordion li i { 
                position: absolute; 
                margin-top: 16px; 
                right: 0; 
        }
        ul.css-accordion li i:before { 
                content: ""; 
                position: absolute; 
                right:0; 
                top:50%; 
                width: 0; 
                height: 0; 
                margin-top: -4px; 
                border-left: 8px solid transparent; 
                border-right: 8px solid transparent; 
                border-top: 8px solid #333; 
        }
        ul.css-accordion li input[type=radio] { 
                position: absolute; 
                cursor: pointer; 
                width: 100%; 
                height: 100%; 
                z-index: 1; 
                opacity: 0; 
        }
        ul.css-accordion li input[type=radio]:checked ~ p { 
                margin-top: 14px; 
                max-height: 800px; 
                opacity: 1; 
        }
        ul.css-accordion li input[type=radio]:checked ~ h2 { 
                color:#037cd5; 
        }
        ul.css-accordion li input[type=radio]:checked ~ i:before { 
                border-top: none; 
                border-bottom: 8px solid #037cd5; 
        }
         @-webkit-keyframes flipdown {
                 0% {
                 opacity: 0;
                 -webkit-transform-origin: top center;
                 transform-origin: top center;
                 -webkit-transform: rotateX(-90deg);
                 transform: rotateX(-90deg);
                }
                 5% {
                 opacity: 1;
                }
                 80% {
                 -webkit-transform: rotateX(8deg);
                 transform: rotateX(8deg);
                }
                 83% {
                 -webkit-transform: rotateX(6deg);
                 transform: rotateX(6deg);
                }
                 92% {
                 -webkit-transform: rotateX(-3deg);
                 transform: rotateX(-3deg);
                }
                 100% {
                 -webkit-transform-origin: top center;
                 transform-origin: top center;
                 -webkit-transform: rotateX(0deg);
                 transform: rotateX(0deg);
                }
        }
        @keyframes flipdown {
                 0% {
                 opacity: 0;
                 -webkit-transform-origin: top center;
                 transform-origin: top center;
                 -webkit-transform: rotateX(-90deg);
                 transform: rotateX(-90deg);
                }
                 5% {
                 opacity: 1;
                }
                 80% {
                 -webkit-transform: rotateX(8deg);
                 transform: rotateX(8deg);
                }
                 83% {
                 -webkit-transform: rotateX(6deg);
                 transform: rotateX(6deg);
                }
                 92% {
                 -webkit-transform: rotateX(-3deg);
                 transform: rotateX(-3deg);
                }
                 100% {
                 -webkit-transform-origin: top center;
                 transform-origin: top center;
                 -webkit-transform: rotateX(0deg);
                 transform: rotateX(0deg);
                }
        }
</style>
  • Share
  • Copyright 2016 by WebiBeris.com. All Rights Reserved.