Stackoverflow Card Learn

by dollysingh3192

HTML

<div class="container">
  <div class="card c1">
    <h1>Card 1</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis gravida dui at consectetur. Curabitur et pharetra ex. Fusce lobortis turpis libero, et placerat est cursus a. Sed ac libero velit. Suspendisse mattis pretium eros, sit amet auctor massa facilisis eget. Sed vel tortor vel tellus iaculis volutpat. Sed quis congue justo, non accumsan felis. Curabitur ultrices imperdiet mauris, quis suscipit augue dapibus ac.</p>
  </div>
  <div class="card c2">
    <h1>Card 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis facilisis gravida dui at consectetur. Curabitur et pharetra ex. Fusce lobortis turpis libero, et placerat est cursus a. Sed ac libero velit. Suspendisse mattis pretium eros, sit amet auctor massa facilisis eget. Sed vel tortor vel tellus iaculis volutpat. Sed quis congue justo, non accumsan felis. Curabitur ultrices imperdiet mauris, quis suscipit augue dapibus ac.</p>
  </div>
</div>

<button type="button">Expand</button>

SCSS

body {
  min-height: 95vh;
  display: flex;
  align-items: center;
  justify-content: center;

  background-color: #555;

  .container {
    width: 50%;
    max-height: 47vh;
    display: flex;
    flex-direction: column;

    .card {
      overflow: hidden;
      max-height: 20%;
      min-height: 20%;
      background: black;
      color: white;
      border: 1px solid white;
      cursor: pointer;
      padding: 20px;

      transition-property: max-height, width, opacity, margin,
        line-height, padding;
      transition-duration: 500ms;
      transition-timing-function: ease-in-out;

      &.expand {
        min-height: 100%;
        padding-bottom: 20px;
      }

      &.display {
        min-height: 0;
        max-height: 0;
        width: 0;
        opacity: 0;
        z-index: -1;
        margin: 0;
        padding: 0;
        line-height: 0;
      }

      &.overflowAllowed {
        overflow-y: scroll;
      }

      p {
        opacity: 0;
        z-index: 2;

        transition: all 1s ease-in-out;

        &.expand {
          opacity: 1;
        }
      }
    }
  }
  
  button {
    position: absolute;
    border: none;
    background: black;
    color: white;
    box-shadow: 0 5px 6px -6px white;
    
    top: 10%;
    padding: 10px;
    cursor: pointer;
    transition: transform 500ms ease;
    
    &:focus {
      outline: 0;
    }
    
    &:hover {
      transform: scale(1.1);
    }
  }
}

JavaScript

// * function to expand a card
function expand(trig) {
  trig.siblings().each(function (index, sibling) {
    if ($(sibling).hasClass("expand")) notExpand($(sibling));
  });
  trig.addClass("expand");
  trig.siblings().addClass("display");
  trig.children("p").addClass("expand");
  setTimeout(function () {
    trig.addClass("overflowAllowed");
  }, 500);
}

// * function to unexpand a card
function notExpand(trig) {
  trig.siblings().removeClass("display");
  trig.removeClass("expand");
  trig.children("p").removeClass("expand");
  trig.scrollTop(0);
  trig.removeClass("overflowAllowed");
}

// TODO - cards should expand and unexpand on click
$(".card").on("click", function () {
  var trig = $(this);
  if (trig.hasClass("expand")) {
    notExpand(trig);
  } else {
    expand(trig);
  }
});

$("button").on("click", function () {
  if ($(".c1").hasClass("expand")) {
    notExpand($(".c1"));
  } else {
    expand($(".c1"));
  }
});