Accordion

Classic + open more than one

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Library Collection</title>
    <link rel="stylesheet" href="./styles.css" />
  </head>

  <body>
    <main class="w-50 mx-auto mt-40 position-relative">
      <div class="carousel-container">
        <h1 class="accordion-title">Book Collection</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">Mastering Web Design with HTML5 and CSS3</div>
            <div class="expand-icon"></div>
            <div class="collapse-icon"></div>
          </div>
          <div
            class="description"
            id="desc-1"
            role="region"
            aria-labelledby="btn-1"
          >
            Explore the latest HTML5 and CSS3 techniques to create responsive
            and adaptive web designs that work seamlessly across devices. Learn
            about CSS Grid, Flexbox, and other modern web tools.
          </div>
        </div>

        <div class="accordion" data-testid="2">
          <div
            class="title-section"
            role="button"
            tabindex="0"
            aria-controls="desc-2"
            id="btn-2"
          >
            <div class="title">The Ultimate Guide to Front-End Development</div>
            <div class="expand-icon"></div>
            <div class="collapse-icon"></div>
          </div>
          <div
            class="description"
            id="desc-2"
            role="region"
            aria-labelledby="btn-2"
          >
            Dive deep into front-end development strategies, tools, and best
            practices. Learn how to enhance user experience, streamline
            development processes, and stay ahead in the rapidly evolving web
            landscape.
          </div>
        </div>

        <div class="accordion" data-testid="3">
          <div
            class="title-section"
            role="button"
            tabindex="0"
            aria-controls="desc-3"
            id="btn-3"
          >
            <div class="title">
              Interactive Web Development with JavaScript and jQuery
            </div>
            <div class="expand-icon"></div>
            <div class="collapse-icon"></div>
          </div>
          <div
            class="description"
            id="desc-3"
            role="region"
            aria-labelledby="btn-3"
          >
            Learn how to create dynamic and interactive web applications using
            JavaScript and jQuery. This guide covers everything from basic
            syntax to advanced scripting techniques.
          </div>
        </div>

        <div class="accordion" data-testid="4">
          <div
            class="title-section"
            role="button"
            tabindex="0"
            aria-controls="desc-4"
            id="btn-4"
          >
            <div class="title">Innovative Approaches to Product Design</div>
            <div class="expand-icon"></div>
            <div class="collapse-icon"></div>
          </div>
          <div
            class="description"
            id="desc-4"
            role="region"
            aria-labelledby="btn-4"
          >
            This book presents a unique model for the design process,
            integrating cognitive psychology and engineering principles.
            Discover how to navigate the early stages of product development
            with creativity and precision.
          </div>
        </div>
        я

        <div class="accordion" data-testid="5">
          <div
            class="title-section"
            role="button"
            tabindex="0"
            aria-controls="desc-5"
            id="btn-5"
          >
            <div class="title">HTML Essentials</div>
            <div class="expand-icon"></div>
            <div class="collapse-icon"></div>
          </div>
          <div
            class="description"
            id="desc-5"
            role="region"
            aria-labelledby="btn-5"
          >
            A foundational guide to HTML, covering the essential tags and
            structures needed to build modern web pages. Perfect for beginners
            and those looking to solidify their knowledge of web development
            basics.
          </div>
        </div>
      </div>

      <div class="multi-select">
        <label>
          <input
            type="checkbox"
            class="checkbox"
            id="multiselect"
            data-testid="multiselect"
          />
          Select Multiple
        </label>
      </div>
    </main>

    <script src="./script.js"></script>
  </body>
</html>

CSS AccordionJS AccordionTS Accordion