JSFiddle - React, Tailwind, and code Playground

by Prathameshsb

HTML

<!-- Enter your HTML code here -->
<!DOCTYPE html>
<html>

<head>
    <title>Amazon Books</title>
    <link href="https://cdn.jsdelivr.net/npm/h8k-design@latest/dist/index.css" rel="stylesheet"/>
    <link rel="shortcut icon" href="https://cdn.jsdelivr.net/npm/h8k-design@latest/dist/assets/favicon.ico">
    <script src="https://cdn.jsdelivr.net/npm/h8k-components/dist/h8k-components/h8k-components.esm.js"
            type="module"></script>
    <script nomodule src="https://cdn.jsdelivr.net/npm/h8k-components/dist/h8k-components/h8k-components.js"></script>
</head>

<body>
<!--HTML content goes here-->
<main class="w-50 mx-auto mt-40 position-relative">
    <div class="carousel-container">
        <h1 class="accordion-title">Amazon Book Titles</h1>
        <div class="accordion" data-testid="1">
            <div class="title-section" role="button" tabindex="0" aria-controls="desc-1" id="btn-1">
                <div class="title">Responsive Web Design with HTML5 and CSS</div>
                <div class="expand-icon"></div>
                <div class="collapse-icon"></div>
            </div>
            <div class="description" id="desc-1" role="region" aria-labelledby="btn-1">
                Harness the latest capabilities of HTML5 and CSS to create a single UI that works flawlessly on mobile phones, tablets, and desktops ― plus everything in-between Key Features Understand what responsive web design is and its significance for modern web development Explore the latest developments in responsive web design including variable fonts, CSS Scroll Snap, and more Get to grips with the uses and benefits of the new CSS Grid layout Book Description Responsive Web Design with HTML5 and CSS, Third Edition is a renewed and extended version of one of the most comprehensive and bestselling books on the latest HTML5 and CSS tools and techniques for responsive web design.            
            </div>
        </div>

        <div class="accordion" data-testid="2">
           ...

CSS

/* Add your css styles here */

.multi-select {
    position: absolute;
    display: inline-block;
    top: 0;
    right: 0;
}

.accordion-title {
    padding: 5px 10px;
    border-bottom: 1px solid lightgray;
    font-size: 1.5em;
    color: darkgray;
}

.accordion {
    position: relative;
}

.accordion .title-section {
    border-bottom: 1px solid lightgray;
    cursor: pointer;
}

.accordion .title-section .title {
    display: inline-block;
    padding: 5px 10px;
    font-weight: 600;
}

.accordion .title-section .expand-icon {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../../assets/icons/down-icon.png');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
}

.accordion .title-section .collapse-icon {
    display: inline-block;
    height: 20px;
    width: 20px;
    background-image: url('../../assets/icons/up-icon.jpg');
    background-repeat: no-repeat;
    background-position: 50%;
    background-size: cover;
    cursor: pointer;
    position: absolute;
    right: 5px;
    top: 5px;
}

.accordion .description {
    text-align: left;
    padding: 5px 10px;
    border-bottom: 1px solid lightgray;
}

.position-relative {
    position: relative;
}

JavaScript

const accordions = document.querySelectorAll('.accordion');
const multipleCheckbox = document.getElementById('multiselect');

accordions.forEach((accordion, index) => {
  const titleSection = accordion.querySelector('.title-section');
  const description = accordion.querySelector('.description');
  const expandIcon = accordion.querySelector('.expand-icon');
  const collapseIcon = accordion.querySelector('.collapse-icon');

  // Set the initial state of the accordion
  let isExpanded = false;

  // Function to toggle the accordion state
  function toggleAccordion() {
    if (isExpanded) {
      // Collapse the item
      description.style.display = 'none';
      expandIcon.style.display = 'block';
      collapseIcon.style.display = 'none';
      isExpanded = false;
    } else {
      // Expand the item
      description.style.display = 'block';
      expandIcon.style.display = 'none';
      collapseIcon.style.display = 'block';
      isExpanded = true;

      if (!multipleCheckbox.checked) {
        // If "Multiple" is not checked, collapse other items
        accordions.forEach((otherAccordion, otherIndex) => {
          if (index !== otherIndex) {
            const otherDescription = otherAccordion.querySelector('.description');
            const otherExpandIcon = otherAccordion.querySelector('.expand-icon');
            const otherCollapseIcon = otherAccordion.querySelector('.collapse-icon');

            otherDescription.style.display = 'none';
            otherExpandIcon.style.display = 'block';
            otherCollapseIcon.style.display = 'none';
          }
        });
      }
    }
  }

  titleSection.addEventListener('click', toggleAccordion);

  // Initialize the accordion state
  if (index !== 0) {
    // Collapse all items except the first one
    description.style.display = 'none';
    expandIcon.style.display = 'block';
    collapseIcon.style.display = 'none';
  } else {
    // First item is expanded by default
    toggleAccordion();
  }
});