JSFiddle - React, Tailwind, and code Playground

by wh01am

HTML

<div class="accordion">
  <div class="accordion__item">
    <div class="accordion__header" data-collapse="#wedo_1">
      <div class="accordion__title">Galerie zdjęć</div>
    </div>
    <div class="accordion__content" id="wedo_1">
      <a href="ArchiveGalleries.html" class="accordion__content--link">Galerie archiwalne</a>
      <a href="CurrentYear.html" class="accordion__content--link">Rok szkolny 2021/2022</a>
    </div>
  </div>

  <div class="accordion__item">
    <div class="accordion__header" data-collapse="#wedo_1">
      <div class="accordion__title">Galerie zdjęć</div>
    </div>
    <div class="accordion__content" id="wedo_1">
      <a href="ArchiveGalleries.html" class="accordion__content--link">Galerie archiwalne</a>
      <a href="CurrentYear.html" class="accordion__content--link">Rok szkolny 2021/2022</a>
    </div>
  </div>
</div>

CSS

.accordion__item {
  line-height: 1.2;

  margin-bottom: 10px;
}

.accordion__item:last-child {
  margin: 0;
}

/*
.accordion__item.opened
.accordion__content {
    display: block;
}
*/

.accordion__item.opened .accordion__header:after {
  transform: translateY(-50%) rotate(-45deg);
  margin-top: 5px;
}

.accordion__header {
  position: relative;

  border-left: 10px #F2C94C solid;
  box-shadow: 0px 20px 50px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

.accordion__header:after {
  position: absolute;
  top: 40%;
  right: 20px;
  z-index: 1;

  content: "";
  display: block;
  width: 16px;
  height: 16px;

  border-top: 2px solid #ccc;
  border-right: 2px solid #ccc;

  transform: translateY(-50%) rotate(135deg);
}

.accordion__title {
  font-weight: 700;
  color: #6A6B6D;

  padding: 16px 45px 16px 16px;
}

.accordion__content {
  display: none;

  margin-top: 10px;
}

.accordion__content--link {
  display: block;

  font-size: 15px;
  font-weight: 400;
  color: #6A6B6D;
  text-decoration: none;

  box-shadow: 0px 0px 55px rgba(0, 0, 0, 0.06);

  padding: 10px 26px 11px 26px;

  transition: background .1s linear;
  transition: color .1s linear;
}

.accordion__content--link:hover {
  background: #F2C94C;
}

.accordion__content--link:hover {
  color: #fff;
}

JavaScript

$("[data-collapse]").on("click", function(event) {
  event.preventDefault();
  var $this = $(this),
    blockId = $(this).data('collapse');

  $(blockId).slideToggle();

  $(this).toggleClass("opened");
  $(".accordion__item").toggleClass("opened");
});


$('input').focus(function() {
  $(this).parents('.input-data').addClass('focused');
});