RWD/accordion/index.html

<!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>Responsive accordion</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/boxicons@latest/css/boxicons.min.css">
  <link rel="stylesheet" href="css/main.css">
</head>

<body>

  <section class="accordion container">
    <div class="accordion__container">
      <div class="accordion__item">
        <header class="accordion__header">
          <i class='bx bx-plus accordion__icon'></i>
          <h3 class="accordion__title">What's an accordion?</h3>
        </header>

        <div class="accordion__content">
          <p class="accordion__description">An accordion always contains the category title, an expanded and a collapsed
            state, an icon indicating expansion, and the spacing between them.</p>
        </div>
      </div>

      <div class="accordion__item">
        <header class="accordion__header">
          <i class='bx bx-plus accordion__icon'></i>
          <h3 class="accordion__title">When and how should it be used?</h3>
        </header>

        <div class="accordion__content">
          <p class="accordion__description">It should be used when users only need a few key concepts or descriptions
            of the content on a single page.</p>
        </div>
      </div>

      <div class="accordion__item">
        <header class="accordion__header">
          <i class='bx bx-plus accordion__icon'></i>
          <h3 class="accordion__title">What happens if the user clicks on a collapsed card while another card is open?
          </h3>
        </header>

        <div class="accordion__content">
          <p class="accordion__description">It happens that the open card was closed, to give way to the information of
            the next
            open card, but there are different designs that prefer it the other way around.</p>
        </div>
      </div>

      <div class="accordion__item">
        <header class="accordion__header">
          <i class='bx bx-plus accordion__icon'></i>
          <h3 class="accordion__title">How to choose an icon to indicate expansion?</h3>
        </header>

        <div class="accordion__content">
          <p class="accordion__description">You must choose a different icon to open and close, so that the user
            understands what action he took.</p>
        </div>
      </div>
    </div>
  </section>

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

</html>