Responsive Accordion Animation in CSS

Source Code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="css/style.css">
  <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.js"></script>
</head>
<body>
<ul id="box">
  <li>
    <input type="radio" name="title" id="q1" checked>
    <label for="q1">
      What is HTML ?
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </label>

    <div class="content">
      <p>Markup languages use sets of markup tags to characterize text elements within a document, which gives instructions to the web browsers on how the document should appear.</p>
    </div>
  </li>
  <li>
    <input type="radio" name="title" id="q2">
    <label for="q2">
      What is CSS ?
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </label>
    <div class="content">
      <p>Cascading Style Sheets, fondly referred to as CSS, is a simply designed language intended to simplify the process of making web pages presentable. CSS allows you to apply styles to web pages. More importantly, CSS enables you to do this independent of the HTML that makes up each web page.</p>
    </div>
  </li>

  <li>
    <input type="radio" name="title" id="q3">
    <label for="q3">
      What is Js ?
      <ion-icon name="chevron-forward-outline"></ion-icon>
    </label>
    <div class="content">
      <p>JavaScript is a dynamic programming language that's used for web development,It is used both on the client-side and server-side that allows you to make web pages interactive.Where HTML and CSS are languages that give structure and style to web pages, JavaScript gives web pages interactive elements that engage a user.It is an interpreted programming language with object-oriented capabilities</p>
    </div>
  </li>

</ul>
</body>
</html>

style.css

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;700&display=swap');

*{
  padding: 0;
  margin: 0;
  font-family: 'Poppins', sans-serif;
  box-sizing: border-box;
}
body{
  background-color:#95afc0;
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

#box{
  width: 600px;
  background-color: #fff;
  border-radius: 3px;
  padding: 10px;
  box-shadow: rgba(0, 0, 0, 0.15) 0px 2px 8px;
}

#box li{
  list-style: none;
  width: 100%;
}
#box li label{
  background-color: #2f3640;
  color:white;
  display: flex;
  justify-content: space-between;
  font-size: 18px;
  padding: 10px;
  cursor: pointer;
  font-weight: 500;
}

ion-icon{
  margin-top: 3px;
  font-size: 20px;
  transition: 0.5s;
}
input[type="radio"]{
  display: none;
}

.content{
  padding:0 10px;
  line-height: 25px;
  max-height: 0;
  overflow: hidden;
  transition: 0.5s linear;
  border-bottom: 2px solid white;
}

#box li input[type="radio"]:checked ~ .content{
  max-height: 400px;
}
#box li input[type="radio"]:checked + label ion-icon{
transform: rotate(90deg);
}

Output

Live Preview

To download raw file Click Here

Responsive Accordion Animation in CSS

Source Code

style.css

Output

Web Development