Login
Tabs

Vertical Accordion

16 Jan 2023

Vertical Accordion
HTML
SCSS
PostCSS
JS 
                            <section class="vertical-accordion-section">
  <div class="cont">
    <div class="vertical-accordion">
      <div class="vertical-accordion__item active">
        <div class="title">
          <h4>Lorem ipsum dolor</h4>
        </div>
        <div class="photo">
          <img src="images/photo.jpg" alt="Photo" />
        </div>

        <div class="info-block">
          <h3>Lorem ipsum dolor</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>

      <div class="vertical-accordion__item">
        <div class="title">
          <h4>Lorem ipsum dolor</h4>
        </div>
        <div class="photo">
          <img src="images/photo.jpg" alt="Photo" />
        </div>

        <div class="info-block">
          <h3>Lorem ipsum dolor</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>

      <div class="vertical-accordion__item">
        <div class="title">
          <h4>Lorem ipsum dolor</h4>
        </div>
        <div class="photo">
          <img src="images/photo.jpg" alt="Photo" />
        </div>

        <div class="info-block">
          <h3>Lorem ipsum dolor</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>

      <div class="vertical-accordion__item">
        <div class="title">
          <h4>Lorem ipsum dolor</h4>
        </div>
        <div class="photo">
          <img src="images/photo.jpg" alt="Photo" />
        </div>

        <div class="info-block">
          <h3>Lorem ipsum dolor</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>

      <div class="vertical-accordion__item">
        <div class="title">
          <h4>Lorem ipsum dolor</h4>
        </div>
        <div class="photo">
          <img src="images/photo.jpg" alt="Photo" />
        </div>

        <div class="info-block">
          <h3>Lorem ipsum dolor</h3>
          <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
            eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim
            ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut
            aliquip ex ea commodo consequat.
          </p>
        </div>
      </div>
    </div>
  </div>
</section>
                        
                            .vertical-accordion-section {
  padding: 150px 0;
}

.vertical-accordion {
  align-items: stretch;
  display: flex;
  width: 100%;

  &__item {
    align-items: center;
    border: 1px solid var(--white);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: column;
    height: ac(500px, 400px);
    justify-content: flex-end;
    overflow: hidden;
    padding: 30px ac(50px, 30px);
    position: relative;
    transition: flex 0.25s ease;
    z-index: 1;

    &:not(.active) {
      cursor: pointer;
    }

    .photo {
      top: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      transition: opacity 0.25s ease;
      z-index: -1;

      &:before {
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        background: var(--black);
        opacity: 0.5;
      }

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    .title {
      bottom: 50px;
      opacity: 1;
      position: absolute;
      transform: rotate(-90deg) scale(1) translateY(50%) translateX(50%);
      transform-origin: bottom;
      transition: transform 0.3s ease, opacity 0.25s ease;
      width: ac(400px, 280px);
    }

    .info-block {
      position: absolute;
      bottom: 50px;
      left: 50px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(50%) translateX(25%) scale(0);
      transition: transform 0.3s ease, opacity 0.3s ease;
      width: 70%;
    }

    &.active {
      flex-grow: 1;

      .title {
        opacity: 0;
        pointer-events: none;
        transform: rotate(0deg) scale(0) translateY(50%) translateX(50%);
      }

      .photo {
        opacity: 1;
      }

      .info-block {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
        transition-delay: 0.15s;
      }
    }

    @include max-md {
      width: 100%;
      flex: none;
      flex-direction: row;
      flex-wrap: wrap;
      height: auto;
      justify-content: flex-start;
      padding: 20px;

      .title {
        height: auto;
        position: static;
        transform: scale(1) translateY(0);
        width: 100%;
        padding-right: 20px;

        &:before {
          content: "✚";
          font-size: 15px;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%) scale(1);
          transition: opacity 0.25s ease, transform 0.25s ease;
        }
      }

      .info-block {
        padding-bottom: 0;
        padding-top: 0;
        position: static;
        height: 0;
        transform: translateX(0) scale(0);
        transition: opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease,
        height 0.3s ease;
        transition-delay: 0s;
      }

      &.active {
        .title {
          transform: scale(0) translateY(100%);

          &:before {
            transform: translateY(-50%) scale(0);
            opacity: 0;
          }
        }

        .info-block {
          height: auto;
          padding-top: 15px;
          padding-bottom: 10px;
        }
      }
    }
  }

  @include max-md {
    flex-direction: column;
  }
}
                        
                            .vertical-accordion-section {
  padding: 150px 0;
}

.vertical-accordion {
  align-items: stretch;
  display: flex;
  width: 100%;

  &__item {
    align-items: center;
    border: 1px solid var(--white);
    display: flex;
    flex-grow: 0;
    flex-shrink: 0;
    flex-direction: column;
    height: ac(500px, 400px);
    justify-content: flex-end;
    overflow: hidden;
    padding: 30px ac(50px, 30px);
    position: relative;
    transition: flex 0.25s ease;
    z-index: 1;

    &:not(.active) {
      cursor: pointer;
    }

    .photo {
      top: 0;
      bottom: 0;
      left: 0;
      opacity: 0;
      width: 100%;
      height: 100%;
      overflow: hidden;
      position: absolute;
      transition: opacity 0.25s ease;
      z-index: -1;

      &:before {
        content: "";
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        position: absolute;
        background: var(--black);
        opacity: 0.5;
      }

      img {
        object-fit: cover;
        width: 100%;
        height: 100%;
      }
    }

    .title {
      bottom: 50px;
      opacity: 1;
      position: absolute;
      transform: rotate(-90deg) scale(1) translateY(50%) translateX(50%);
      transform-origin: bottom;
      transition: transform 0.3s ease, opacity 0.25s ease;
      width: ac(400px, 280px);
    }

    .info-block {
      position: absolute;
      bottom: 50px;
      left: 50px;
      display: flex;
      flex-direction: column;
      justify-content: flex-start;
      align-items: flex-start;
      opacity: 0;
      transform: translateY(50%) translateX(25%) scale(0);
      transition: transform 0.3s ease, opacity 0.3s ease;
      width: 70%;
    }

    &.active {
      flex-grow: 1;

      .title {
        opacity: 0;
        pointer-events: none;
        transform: rotate(0deg) scale(0) translateY(50%) translateX(50%);
      }

      .photo {
        opacity: 1;
      }

      .info-block {
        opacity: 1;
        transform: translateY(0) translateX(0) scale(1);
        transition-delay: 0.15s;
      }
    }

    @mixin tab-sm {
      width: 100%;
      flex: none;
      flex-direction: row;
      flex-wrap: wrap;
      height: auto;
      justify-content: flex-start;
      padding: 20px;

      .title {
        height: auto;
        position: static;
        transform: scale(1) translateY(0);
        width: 100%;
        padding-right: 20px;

        &:before {
          content: "✚";
          font-size: 15px;
          position: absolute;
          right: 0;
          top: 50%;
          transform: translateY(-50%) scale(1);
          transition: opacity 0.25s ease, transform 0.25s ease;
        }
      }

      .info-block {
        padding-bottom: 0;
        padding-top: 0;
        position: static;
        height: 0;
        transform: translateX(0) scale(0);
        transition: opacity 0.3s ease, transform 0.3s ease, padding 0.3s ease,
          height 0.3s ease;
        transition-delay: 0s;
      }

      &.active {
        .title {
          transform: scale(0) translateY(100%);

          &:before {
            transform: translateY(-50%) scale(0);
            opacity: 0;
          }
        }

        .info-block {
          height: auto;
          padding-top: 15px;
          padding-bottom: 10px;
        }
      }
    }
  }
  @mixin tab-sm {
    flex-direction: column;
  }
}
                        
                            const verticalAccordion =
  document.getElementsByClassName("vertical-accordion")[0];
if (verticalAccordion) {
  const verticalAccordionItemsArr = verticalAccordion.querySelectorAll(
    ".vertical-accordion__item"
  );

  verticalAccordionItemsArr.forEach((item, i) => {
    item.addEventListener("click", () => {
      document
        .querySelector(".vertical-accordion__item.active")
        .classList.remove("active");
      item.classList.add("active");
    });
  });
}

Базовий адаптивний вертикальний акордеон.

0