JSFiddle - React, Tailwind, and code Playground

by deathstalkersid

HTML

<html lang="en">

  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">

  </head>

  <body>
    <div class="accordion-item">
      <div class="accordion-button block " type="button">
        <a class="overlay" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"></a>
        <div class="inner">
          <p>This entire box is collapsible.</p>
          <p>But somehow the arrow on the right side does not turn</p>
          <a href="https://duckduckgo.com/">I'm a clickable link that could also have been a button</a>
        </div>
      </div>
      <div class="collapse" id="collapseExample">
        <div class="card card-body">
          Exra information about the thing written above.
        </div>
      </div>
    </div>
    <div class="accordion" id="accordionExample">
      <div class="accordion-item">
        <h2 class="accordion-header" id="headingOne">
          <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
            <p>This entire box is collapsible.</p>
          <p>But somehow the arrow on the right side does not turn</p>          
          </button>
          <a href="https://duckduckgo.com/">I'm a clickable link that could also have been a button</a>
        </h2>
        <div id="collapseOne" class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample">
          <div class="accordion-body">
            Extra information about the thing written above.
          </div>
        </div>
      </div>
    </div>
   ...

CSS

.block {
  position:relative;
}

.block .overlay {
  position:absolute;
  left:0; top:0; bottom:0; right:0;
}

.block .inner {
  position:relative;
  pointer-events: none;
  z-index: 1;
}

.block .inner a {
  pointer-events: all;
}