If You Want Adsense Approval for your blog JOIN US Adsense Ready theme Now!

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.

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.

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

Post a Comment

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.