accordions

revision:

Content

checkbox accordion radio accordion focus accordion accordion design - simple accordion design - open multiple accordion design - open one picture accordion JavaScript - accordion

checkbox accordion

top
code: 
                <main>
                    <ul>
                        <li>
                            <input type="checkbox" id="item-1" />
                            <label for="item-1">item 1</label>
                            <div class="content">
                                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed
                                    mattis justo ex, nec commodo ... eu faucibus sem.
                                </p>
                            </div>
                        </li>
                        <li>
                            <input type="checkbox" id="item-2" />
                            <label for="item-2">item 2</label>
                            <div class="content">
                                <p>Lorem ipsum dolor sit amet,...Etiam eu faucibus sem.
                                </p>
                            </div>
                        </li>
                        <li>
                            <input type="checkbox" id="item-3" />
                            <label for="item-3">item 3</label>
                            <div class="content">
                                <p>Lorem ipsum dolor sit amet,... Etiam eu faucibus sem.
                                </p>
                            </div>
                        </li>
                    </ul>
                </main>
                <style>
                        main {padding: 5vw;}
                        ul {margin: 0;padding: 0;}
                        li {list-style: none; margin-bottom: 1vw;}
                        [type="checkbox"] {display: none;}
                        [type="checkbox"] + label {display: block; width: 100%; height: 3vw; text-align: center; 
                            background-color: var(--grey); transition: background-color 300ms; cursor: pointer;}
                        [type="checkbox"]:checked + label {background-color: var(--green);}
                        .content {height: 0; overflow: hidden; opacity: 0; transition: opacity 1s;}
                        .content > * {margin: 2vw;}
                        [type="checkbox"]:checked ~ .content {height: auto; opacity: 1;}
                </style>

radio accordion

top
code: 
                <div class="spec">
                    <ul>
                        <li>
                            <input type="radio" id="item-4" name="accordion" />
                            <label for="item-4">accordion 1</label>
                            <div class="content">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit.. . bibendum id at
                                    augue. Etiam eu faucibus sem.
                                </p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" id="item-5" name="accordion" />
                            <label for="item-5">accordion 2</label>
                            <div class="content">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...turpis vestibulum 
                                    bibendum id ataugue. Etiam eu faucibus sem.
                                </p>
                            </div>
                        </li>
                        <li>
                            <input type="radio" id="item-6" name="accordion" />
                            <label for="item-6">accordion 3</label>
                            <div class="content">
                                <p>
                                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... vestibulum bibendum 
                                    id at
                                    augue. Etiam eu faucibus sem.
                                </p>
                            </div>
                        </li>
                    </ul>
                </div>
                <style>
                        [type="radio"] {display: none;}
                        [type="radio"] + label { display: block; width: 100%; height: 3vw; 
                            background-color: var(--grey); padding: 0.2vw; text-align: center; 
                            transition: background-color 300ms; cursor: pointer;}
                        [type="radio"]:checked + label {background-color: var(--green);}
                        [type="radio"]:checked ~ .content {height: auto; opacity: 1;}
                </style>

focus accordion

top
code: 
                <div class="spec">
                    <ul>
                    <li>
                        <div class="heading" tabindex="1">accordion 1</div>
                        <div class="content">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit.... vestibulum bibendum
                                id at augue. Etiam eu faucibus sem.
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="heading" tabindex="2">accordion 2</div>
                        <div class="content">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit. ... bibendum id at
                                augue. Etiam eu faucibus sem.
                            </p>
                        </div>
                    </li>
                    <li>
                        <div class="heading" tabindex="3">accordion 3</div>
                        <div class="content">
                            <p>
                                Lorem ipsum dolor sit amet, consectetur adipiscing elit..... bibendum id at
                                augue. Etiam eu faucibus sem.
                            </p>
                        </div>
                    </li>
                    </ul>
                </div>
                <style>
                    .heading { display: block; width: 100%; height: 3vw; background-color: var(--grey); 
                        padding: 0.2vw; text-align: center;  transition: background-color 300ms; 
                        cursor: pointer;}
                    .heading:focus {background-color: var(--green);}
                    .heading:focus + .content {height: auto; opacity: 1;}
                </style>

accordion design - simple

top

Content is placed in this paragraph.This is the first section of this accordion layout.

Content is placed in this paragraph.This is the second section of this accordion layout.

Content is placed in this paragraph. This is the third section of this accordion layout

code: 
                <div class="spec">
                    <input type="checkbox" id="title1" />
                    <label for="title1" class="label-one">Title one</label>
                    <div class="content">
                        <p>Content is placed in this paragraph.This is the first section 
                        of this accordion layout.</p>
                    </div>

                    <input type="checkbox" id="title2" />
                    <label for="title2" class="label-one">Title two</label>
                    <div class="content">
                        <p>Content is placed in this paragraph.This is the second section 
                        of this accordion layout.</p>
                    </div>

                    <input type="checkbox" id="title3" />
                    <label for="title3" class="label-one">Title three</label>
                    <div class="content">
                        <p>Content is placed in this paragraph. This is the third section 
                        of this accordion layout</p>
                    </div>
                </div>
                <style>
                    input {display: none;}
                    .label-one {display: block; padding: .8VW .2vw;  margin: 0 0 1px 0; cursor: pointer;
                        background-image: repeating-radial-gradient (circle , blue, green, cyan); 
                        border-radius: 0.3VW; color: darkblue; transition: ease .5s;}
                    .label-one:hover {background-image: repeating-linear-gradient(-5deg, black, yellow, red);}
                    .content {background: tomato; padding: 1vw 2.5vw; border: .2vw solid green;  
                        margin: 0 0 1px 0; border-radius: .3vw;}
                    input + .label-one + .content {display: none; }
                    input:checked + .label-one + .content {display: block;}
                </style>

accordion design - open multiple

top
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Ipsum, reiciendis!
Lorem ipsum dolor sit amet consectetur adipisicing elit. A, in!
code: 
                <div class="tabs">
                    <div class="tab">
                        <input type="checkbox" id="chck1">
                        <label class="tab-label" for="chck1">item 1</label>
                        <div class="tab-content">Lorem ipsum dolor sit amet consectetur, adipisicing elit. 
                        Ipsum, reiciendis!</div>
                    </div>
                    <div class="tab">
                        <input type="checkbox" id="chck2">
                        <label class="tab-label" for="chck2">item 2</label>
                        <div class="tab-content">Lorem ipsum dolor sit amet consectetur adipisicing elit. 
                        A, in!</div>
                    </div>
                </div>
                <style>
                    .tabs{border-radius: 2vw;overflow: hidden; box-shadow: 0 .4vw .4vw -.2vw; rgba(0,0,0,0.5);}
                    .tab{width: 100%; color:orange;overflow: hidden;}
                    .tab-label {display: flex; justify-content: space-between;  padding: 1vw; background: crimson; 
                        font-weight: bold; cursor: pointer;}
                    .tab-label:hover {background:dodgerblue;}
                    .tab-label::after {content: "\276F";  width: 2vw; height: 1vw; text-align: center; transition: all .35s;}
                    .tab-content{max-height: 0; padding: 0 1vw; color: black; background: lightgrey;  transition: all .35s;}
                    .tab input:checked + .tab-label::after {transform: rotate(90deg);}
                    .tab input:checked + .tab-label + .tab-content {max-height: 20vw;padding: 1vw;}
                </style>

accordion design - open one

top
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Eos, facilis.
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nihil, aut.
code: 
:
                <div class="tabsA">
                    <div class="tabA">
                    <input type="radio" id="rd1" name="rd">
                    <label class="tabA-label" for="rd1">Item 1</label>
                    <div class="tabA-content">Lorem, ipsum dolor sit amet consectetur adipisicing elit.
                        Eos, facilis.</div>
                    </div>
                    <div class="tabA">
                        <input type="radio" id="rd2" name="rd">
                        <label class="tabA-label" for="rd2">Item 2</label>
                        <div class="tabA-content">Lorem ipsum dolor, sit amet consectetur adipisicing elit. 
                        Nihil, aut.</div>
                    </div>
                    <div class="tabA">
                        <input type="radio" id="rd3" name="rd">
                        <label for="rd3" class="tabA-close">Close others ×</label>
                    </div>
                </div>
                <style>
                    .tabsA{border-radius: 2vw;overflow: hidden; box-shadow: 0 .4vw .4vw -.2vw 
                        rgba(0,0,0,0.5);}
                    .tabA{width: 100%; color:orange;overflow: hidden;}
                    .tabA-label {display: flex; justify-content: space-between;  padding: 1em; background: crimson; font-weight: bold; cursor: pointer;}
                    .tabA-label:hover {background:dodgerblue;}
                    .tabA-label::after {content: "\276F";  width: 2vw; height: 1vw; text-align: center; transition: all .35s;}
                    .tabA-content{max-height: 0; padding: 0 1vw; color: tomato; background: lightgrey; transition: all .35s;}
                    .tabA-close{display: flex;justify-content: flex-end; padding: 1vw; font-size: 1vw; background: crimson; cursor: pointer;}
                    .tabA-close:hover {background: dodgerblue;}
                    input:checked + .tabA-label::after {transform: rotate(90deg);}
                    input:checked + .tabA-label + .tabA-content {max-height: 200vh;padding: 1em;}
                </style>

picture accordion

top

code: 
            <div id="accordionA"> 
                <ul>
                    <li><div class="image_title"><a href="#">Introduction<img src="../imges/1.jpg"/></a></div></li>
                    <li><div class="image_title"><a href="#">Americas<img src="../imges/2.jpg"/></a></div></li>
                    <li><div class="image_title"><a href="#">Asia_Pacific<img src="../imges/3.jpg"/></a></div></li>
                    <li><div class="image_title"><a href="#">EMEA<img src="../imges/4.jpg"/></a></div></li>
                    <li><div class="image_title"><a href="#">Cartoons<img src="../imges/5b.jpg"/></a></div></li>
                </ul>
            </div> <br>
            <style>
                #accordionA {width: 96vw; height: 25vw; float: left; overflow: hidden; margin-left: 0vw;  -webkit-box-shadow: 0 0 1vw .1vw rgba(0, 0, 0, 0.35); 
                    -moz-box-shadow: 0 0 1vw .1vw rgba(0, 0, 0, 0.35); box-shadow: 0 0 1vw .1vw rgba(0, 0, 0, 0.35);}
                #accordionA ul li {position: relative; display: block; width: 96vw; height: 25vw; float: left; border-left: 0.5vw solid #888;  
                    -webkit-box-shadow: 0 0 2.5vw 1vw rgba(0, 0, 0, 0.5); -moz-box-shadow: 0 0 2.5vw 1vw rgba(0, 0, 0, 0.5);box-shadow: 0 0 2.5vw 1vw rgba(0, 0, 0, 0.5);
                     -webkit-transition: all 0.5s; -moz-transition: all 0.5s;  transition: all 0.5s;}
                #accordionA ul:hover li {width: 12vw;}  
                #accordionA li img {display: block;}
                .image_title {background: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; width: 10vw;}
                .image_title a {display: block; color: dodgerblue; text-decoration: none; padding: 1vw; font-size: 1.5vw;} 
            </style>

JavaScript - accordion

top
Click to expand this section with a sliding effect

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!

Shanghai

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.

Click to expand this section with a sliding effect

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!

Shanghai

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.

Click to expand this section with a sliding effect

Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!

Shanghai

Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.

code: 
            <div class="spec">
                <details class="js-1">
                    <summary class="js-2">Click to expand this section with a sliding effect</summary>
                    <div class="content_a">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!</p>
                        <img src="../images/1.jpg" width="50%" alt="Shanghai">
                        <p>Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.</p>
                    </div>
                </details>
                <details class="js-1">
                    <summary class="js-2">Click to expand this section with a sliding effect</summary>
                    <div class="content_a">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!</p>
                        <img src="../images/2.jpg" width="50%" alt="Shanghai">
                        <p>Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.</p>
                    </div>
                </details>
                <details class="js-1">
                    <summary class="js-2">Click to expand this section with a sliding effect</summary>
                    <div class="content_a">
                        <p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Modi unde, ex rem voluptates autem aliquid veniam quis temporibus repudiandae illo, nostrum, pariatur quae! At animi modi dignissimos corrupti placeat voluptatum!</p>
                        <img src="../images/3.jpg" width="50%" alt="Shanghai">
                        <p>Facilis ducimus iure officia quos possimus quaerat iusto, quas, laboriosam sapiente autem ab assumenda eligendi voluptatum nisi eius cumque, tempore reprehenderit optio placeat praesentium non sint repellendus consequuntur? Nihil, soluta.</p>
                    </div>
                </details>
            </div>
            <style>
                .js-2 {background: burlywood; padding: 5px; border: 2px solid transparent;  outline: none;}
                .js-2:focus {border-color: black;}
                .js-1 {max-width: 40vw; box-sizing: border-box; margin-top: 0.5vw; margin-left: 2VW;}
                .content_a {border-top: none; padding: 1vw; border: 0.2vw solid green; border-top: none;}
                .content_a p {margin: 0;  padding-bottom: 1vw;}
                .content_a p:last-child { padding: 0;}
                .content_a img{max-width: 100%;} 
            </style>