Create a accordion with html css and javascript

create a accordion with html css and javascript

<!DOCTYPE html>
<html lang="en">
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
    body {
      font-family: 'Arial', sans-serif;
      margin: 0;
      padding: 0;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
      background-color: #f0f0f0;

    .accordion {
      width: 300px;
      border: 1px solid #ccc;
      background-color: #fff;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);

    .accordion-section {
      border-bottom: 1px solid #ccc;

    .accordion-header {
      padding: 10px;
      cursor: pointer;
      background-color: #f5f5f5;
      user-select: none;

    .accordion-body {
      padding: 10px;
      display: none;

<div class="accordion">
  <div class="accordion-section">
    <div class="accordion-header" onclick="toggleSection(1)">Section 1</div>
    <div class="accordion-body" id="section1">This is the content for Section 1.</div>

  <div class="accordion-section">
    <div class="accordion-header" onclick="toggleSection(2)">Section 2</div>
    <div class="accordion-body" id="section2">This is the content for Section 2.</div>

  <div class="accordion-section">
    <div class="accordion-header" onclick="toggleSection(3)">Section 3</div>
    <div class="accordion-body" id="section3">This is the content for Section 3.</div>

  function toggleSection(sectionNumber) {
    var section = document.getElementById('section' + sectionNumber); = ( === 'block') ? 'none' : 'block';

    // Hide other sections
    for (var i = 1; i <= 3; i++) {
      if (i !== sectionNumber) {
        document.getElementById('section' + i).style.display = 'none';


Ajink Gupta
Ajink Gupta
Articles: 38