Multi Accordion with CSS Only

 Multi Accordion with CSS Only

  Actually in AMP HTML there is already an amp-accordion, but only for a single accordion. I mean, I want to use multiple accordions and when clicked can open and close other open accordions.

See Demo

If you want to try it, please use the following codes.

Copy the following CSS code and save it in your blog style.

.MIUSM-accordion {
    width: 100%;
}
.MIUSM-accordion .MIUSMaccordion {
    position: relative;
    display: block;
    margin: 0;
}
.MIUSM-accordion .MIUSMaccordion input {
    position: absolute;
    opacity: 0;
    z-index: -1;
}
.MIUSM-accordion .MIUSMaccordion .btn-accordion {
    display: block;
  	height: 40px;
    text-align: left;
    padding: 0 10px;
    margin-bottom: 5px;
    border: 0;
    background: #555;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    font-family: Arial,Helvetica,sans-serif;
    line-height: 40px;
    cursor: pointer;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
.MIUSM-accordion .MIUSMaccordion .btn-accordion:hover {
    background: #333;
}
.MIUSM-accordion .MIUSMaccordion .btn-accordion:focus,
.MIUSM-accordion .MIUSMaccordion .btn-accordion:active {
    outline: none;
}
.MIUSM-accordion .MIUSMaccordion input:checked ~ .btn-accordion {
    background: #111;
}
.MIUSM-accordion .MIUSMaccordion .btn-accordion .arrow {
    float: right;
    width: 24px;
    height: 40px;
}
.MIUSM-accordion .MIUSMaccordion input:checked ~ .btn-accordion .arrow {
    transform: rotate(180deg);
}
.MIUSM-accordion .MIUSMaccordion .btn-accordion .arrow path {
    fill: #fff;
}
.MIUSM-accordion .MIUSMaccordion .content {
    width: 100%;
    padding: 0;
   	margin: 5px 0;
	  display: none;
}
.MIUSM-accordion .MIUSMaccordion .content p {
    margin: 5px 0;
    padding: 0;
  	color: #555;
}

.MIUSM-accordion .MIUSMaccordion input:checked ~ .content {
    display: block;
    pointer-events: all;
    visibility: visible;
}
 

Then to display the accordion, use the following HTML code.

<div class="MIUSM-accordion">

    <div class="MIUSMaccordion">
    <input type="radio" id="cek1" name="cek" checked=""/>
    <label for="cek1" class="btn-accordion">Accordion 1<svg class="arrow" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis lacinia diam. Etiam et mauris vehicula, tempus lectus et, vestibulum lorem. Nam ullamcorper luctus massa, in interdum ante rhoncus vel. Duis dignissim auctor dolor, sit amet consequat odio efficitur vulputate. Aenean sed sapien et justo sodales dapibus.</p>
      </div>
    </div>
    
    <div class="MIUSMaccordion">
    <input type="radio" id="cek2" name="cek"/>
    <label for="cek2" class="btn-accordion">Accordion 2<svg class="arrow" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis lacinia diam. Etiam et mauris vehicula, tempus lectus et, vestibulum lorem. Nam ullamcorper luctus massa, in interdum ante rhoncus vel. Duis dignissim auctor dolor, sit amet consequat odio efficitur vulputate. Aenean sed sapien et justo sodales dapibus.</p>
      </div>
    </div>
    
    <div class="MIUSMaccordion">
    <input type="radio" id="cek3" name="cek"/>
    <label for="cek3" class="btn-accordion">Accordion 3<svg class="arrow" width="24" height="24" viewBox="0 0 24 24"><path d="M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z" /></svg></label>
      <div class="content">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut quis lacinia diam. Etiam et mauris vehicula, tempus lectus et, vestibulum lorem. Nam ullamcorper luctus massa, in interdum ante rhoncus vel. Duis dignissim auctor dolor, sit amet consequat odio efficitur vulputate. Aenean sed sapien et justo sodales dapibus.</p>
      </div>
    </div>
    
  </div>

Pay attention to the marked codes, according to the order and number of accordions displayed.

If you want to display Youtube videos in accordion, use the following code to make the video responsive. Save it in a tag <div class="content">and here's a demo with a Youtube video.

<div class="youtube-responsive">

<iframe width="auto" height="auto" src="https://youtube.com/embed/videoseries?list=PLXkJdoU2VsqkttzvHdQIY-a9waGGJ4xGz" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</div>

Adjust Youtube video embed URL in the marked code.

Accordion 1

Accordion 2

Who said blogging was hard and expensive to do? How to create a free blog is very easy and can be done from any device, including HP, you know!

For those of you who like to write, blogs are the right place to pour creative ideas so that your work can not only be enjoyed by yourself but also by the public.

Accordion 3

To create a blog, the method is not too difficult and of course you don't need to spend money or it's free, gang.

That's because today there are many service provider sites to create a blog for free which is not only easy, but also practical to use. Call it Blogger.com, WordPress, Weebly, and many more.

However, the obstacle for beginners is the lack of knowledge to create the blog