Responsive accordion | Responsive Accordion Pure Html CSS - Codewithrandom

Responsive accordion |  Responsive Accordion Pure Html CSS - Codewithrandom

Responsive accordion |  Responsive Accordion Pure Html CSS - Codewithrandom
Welcome🎉 to Code With Random blog. In this blog, we learn how to create a Responsive accordion. We use HTML & CSS  for Responsive accordion. Hope you enjoy our blog so let's start with a basic HTML structure for the Responsive accordion. 

HTML code

 <h1>CSS + HTML only Accordion Element</h1>  
 <ul>  
  <li>  
   <input type="checkbox" checked>  
   <i></i>  
   <h2>Languages Used</h2>  
   <p>This page was written in HTML and CSS. The CSS was compiled from SASS. I used Normalize as my CSS reset and -prefix-free to save myself some headaches. I haven't quite gotten the hang of Slim for compiling into HTML, but someday I'll use it since its syntax compliments that of SASS. Regardless, this could all be done in plain HTML and CSS.</p>  
  </li>  
  <li>  
   <input type="checkbox" checked>  
   <i></i>  
   <h2>How it Works</h2>  
   <p>Using the sibling and checked selectors, we can determine the styling of sibling elements based on the checked state of the checkbox input element. One use, as demonstrated here, is an entirely CSS and HTML accordion element. Media queries are used to make the element responsive to different screen sizes.</p>  
  </li>  
  <li>  
   <input type="checkbox" checked>  
   <i></i>  
   <h2>Points of Interest</h2>  
   <p>By making the open state default for when :checked isn't detected, we can make this system accessable for browsers that don't recognize :checked. The fallback is simply an open accordion. The accordion can be manipulated with Javascript (if needed) by changing the "checked" property of the input element.</p>  
  </li>  
 </ul>  
There is all HTML code for the Responsive accordion. Now, you can see output without CSS, then we write CSS for the Responsive accordion.
Output
Responsive accordion |  Responsive Accordion Pure Html CSS - Codewithrandom

CSS(SCSS) code

 $white: rgba(254,255,250,1)  
 $grey: rgba(220,231,235,1)  
 $red: rgba(255,104,115,1)  
 $black: rgba(48,69,92,0.8)  
 $sans: 'Titillium Web', sans-serif  
 .transition  
  transition: all 0.25s ease-in-out  
 .flipIn  
  animation: flipdown 0.5s ease both  
 .no-select  
  -webkit-tap-highlight-color: rgba(0,0,0,0)  
  -webkit-touch-callout: none  
  -webkit-user-select: none  
  -khtml-user-select: none  
  -moz-user-select: none  
  -ms-user-select: none  
  user-select: none  
 html  
  width: 100%  
  height: 100%  
  perspective: 900  
  overflow-y: scroll  
  background-color: $grey  
  font-family: $sans  
  color: $black  
 body  
  min-height: 0  
  display: inline-block  
  position: relative  
  left: 50%  
  margin: 90px 0  
  transform: translate( -50% , 0 )  
  box-shadow: 0 10px 0 0 $red inset  
  background-color: $white  
  max-width: 450px  
  padding: 30px  
  @media ( max-width:550px )  
   box-sizing: border-box  
   transform: translate( 0 , 0 )  
   max-width: 100%  
   min-height: 100%  
   margin: 0  
   left: 0  
 h1 , h2  
  color: $red  
 h1  
  text-transform: uppercase  
  font-size: 36px  
  line-height: 42px  
  letter-spacing: 3px  
  font-weight: 100  
  @extend .flipIn  
 h2  
  font-size: 26px  
  line-height: 34px  
  font-weight: 300  
  letter-spacing: 1px  
  display: block  
  background-color: $white  
  margin: 0  
  cursor: pointer  
  @extend .no-select  
 p  
  color: $black  
  font-size: 17px  
  line-height: 26px  
  letter-spacing: 1px  
  position: relative  
  overflow: hidden  
  max-height: 800px  
  @extend .transition  
  opacity: 1  
  transform: translate( 0 , 0 )   
  margin-top: 14px  
  z-index: 2  
 ul  
  list-style: none  
  perspective: 900  
  padding: 0  
  margin: 0  
  li  
   position: relative  
   padding: 0  
   margin: 0  
   padding-bottom: 4px  
   padding-top: 18px  
   border-top: 1px dotted $grey  
   @extend .flipIn  
   &:nth-of-type(1)  
    animation-delay: 0.5s  
   &:nth-of-type(2)  
    animation-delay: 0.75s  
   &:nth-of-type(3)  
    animation-delay: 1.0s  
   &:last-of-type  
    padding-bottom: 0  
   i  
    position: absolute  
    transform: translate( -6px , 0 )  
    margin-top: 16px  
    right: 0  
    &:before , &:after  
     content: ""  
     @extend .transition  
     position: absolute  
     background-color: $red  
     width: 3px  
     height: 9px  
    &:before  
     transform: translate( -2px , 0 ) rotate( 45deg )  
    &:after  
     transform: translate( 2px , 0 ) rotate( -45deg )  
   input[type=checkbox]  
    position: absolute  
    cursor: pointer  
    width: 100%  
    height: 100%  
    z-index: 1  
    opacity: 0  
    &:checked  
     &~p  
      margin-top: 0  
      max-height: 0  
      opacity: 0  
      transform: translate( 0 , 50% )  
     &~i  
      &:before  
       transform: translate( 2px , 0 ) rotate( 45deg )  
      &:after  
       transform: translate( -2px , 0 ) rotate( -45deg )  
 @keyframes flipdown  
  0%  
   opacity: 0  
   transform-origin: top center  
   transform: rotateX(-90deg)  
  5%  
   opacity: 1  
  80%  
   transform: rotateX(8deg)  
  83%  
   transform: rotateX(6deg)  
  92%  
   transform: rotateX(-3deg)  
  100%  
   transform-origin: top center  
   transform: rotateX(0deg)   

Now we have completed our CSS section,  Here is our final updated output CSS.

Final Output
Responsive accordion |  Responsive Accordion Pure Html CSS - Codewithrandom

Now we have completed our CSS section,  Here is our updated output with CSSHope you like the Responsive accordion, you can see output project screenshots. See our other blogs and gain knowledge in front-end development. Thank you 🙏💕

In this post, we learn how to create a Responsive accordion using simple HTML & CSS. If we made a mistake or any confusion, please drop a comment to reply or help you in easy learning.

Written by - Code With Random/Anki 

code by - Alex Bergin

Check out more.....

Post a Comment

Previous Post Next Post