Animation - Slide-Down Section Using Js

animation-slide-down-section-using-js.markdown

Animation - Slide-Down Section Using Js

A Pen by Josh Fitzgerald on CodePen.

License.

index.html

<section>
  <div class="cardRow">
   <p>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. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
  </div>
  
  <div class="cardDetails">
    <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 class="moreDetails collapsible" data-role="moreDetails">
    <strong>Offer Details</strong>
    <ul class="fadeList">
      <li>Earn a $200 cash rewards bonus after spending $1,000 in the first 3 months</li>
      <li>Earn unlimited 1.5% cash rewards on purchases</li>
      <li>Enjoy 1.8% cash rewards on qualified mobile wallet purchases, like Apple Pay® or Google Pay™, during the first 12 months from account opening</li>
      <li>No category restrictions or sign ups and cash rewards don’t expire as long as your account remains open</li>
      <li>Get up to $600 protection on your cell phone (subject to $25 deductible) against covered damage or theft when you pay your monthly cellular telephone bill with your Wells Fargo Cash Wise Visa® Card</li>
      <li>0% Intro APR for 12 months on purchases and balance transfers (fees apply), then a 16.24% - 28.24% variable APR; balance transfers made within 120 days qualify for the intro rate and fee</li><li>$0 Annual Fee</li>
      <li>Select “Apply Now” to learn more about the product features, terms, and conditions</li>
    </ul>
  </div>
</section>

<button data-role="detailsLink">Toggle collapse</button>




<!-- <div class="cardRow">
  <div>
    <div class="cardAward"><i class="icon icon-thumbs-up3"></i> Best card for travel rewards</div>
    <div class="moreDetails collapsible" data-role="moreDetails">
      <strong>Offer Details</strong>
      <ul class="fadeList">
        <li>Earn 30K bonus points when you spend $3,000 in purchases in the first 3 months – that’s a $300 cash redemption value</li>
        <li>$0 Annual Fee</li>
        <li>Earn 3X points for eating out and ordering in</li>
        <li>Earn 3X points for gas stations, rideshares and transit</li>
        <li>Earn 3X points for travel including flights, hotels, homestays and car rentals</li>
        <li>Earn 1X points on other purchases</li>
        <li>0% Intro APR for 12 months on purchases and balance transfers (fees apply), then a 16.24%-27.24% variable APR; balance transfers made within 120 days qualify for the intro rate and fee</li>
        <li>Select "Apply Now" to learn more about the product features, terms, and conditions</li>
      </ul>
    </div>
  </div>
  <button class="detailsLink show buttonUnstyled" data-role="detailsLink" id="toggle-button">
      <span class="show"><span class="icon icon-arrow-down9"></span> View Offer Details</span>
      <span class="hide"><span class="icon icon-arrow-up10"></span> Hide Offer Details</span>
    </button>
</div> -->

script.js

function collapseSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // temporarily disable all css transitions
  var elementTransition = element.style.transition;
  element.style.transition = '';
  
  // on the next frame (as soon as the previous style change has taken effect),
  // explicitly set the element's height to its current pixel height, so we 
  // aren't transitioning out of 'auto'
  requestAnimationFrame(function() {
    element.style.height = sectionHeight + 'px';
    element.style.transition = elementTransition;
    
    // on the next frame (as soon as the previous style change has taken effect),
    // have the element transition to height: 0
    requestAnimationFrame(function() {
      element.style.height = 0 + 'px';
    });
  });
  
  // mark the section as "currently collapsed"
  element.setAttribute('data-collapsed', 'true');
}

function expandSection(element) {
  // get the height of the element's inner content, regardless of its actual size
  var sectionHeight = element.scrollHeight;
  
  // have the element transition to the height of its inner content
  element.style.height = sectionHeight + 'px';

  // when the next css transition finishes (which should be the one we just triggered)
  element.addEventListener('transitionend', function(e) {
    // remove this event listener so it only gets triggered once
    element.removeEventListener('transitionend', arguments.callee);
    
    // remove "height" from the element's inline styles, so it can return to its initial value
    element.style.height = null;
  });
  
  // mark the section as "currently not collapsed"
  element.setAttribute('data-collapsed', 'false');
}

document.querySelector('[data-role="detailsLink"]').addEventListener('click', function(e) {
  var section = document.querySelector('.collapsible[data-role="moreDetails"]');
  var isCollapsed = section.getAttribute('data-collapsed') === 'true';
    
  if(isCollapsed) {
    expandSection(section)
    section.setAttribute('data-collapsed', 'false')
  } else {
    collapseSection(section)
  }
});

style.scss

.cardRow {
  position: relative;
  display: block;
  // border: 0;
  padding-bottom: 0;
  // margin-bottom: 10px;

  .cardAward,
  .cardBtn h4 {
    font-size: 13px;
    text-transform: uppercase;
    font-weight: 600;
    line-height: 1;
  }

  & > div {
    border: 1px solid #ccc;
    padding: 15px 40px 0 40px;
    border-radius: 3px 3px 0 0;

    @at-root div {
      .cardMiles {
        margin-bottom: 15px;
      }

      .cardRecommend {
        display: flex;
        width: fit-content;
        line-height: 20px;
        color: #555;
        background-color: #f5f5f5;
        border: 1px solid #e2e2e2;
        padding: 6px 12px 6px 8px;
        border-radius: 4px;

        .icon {
          font-size: 20px;
          color: #0077cc;
          margin-right: 5px;
        }
      }
    }

    .cardAward {
      .icon {
        font-size: 19px;
        color: #0077cc;
        margin-right: 3px;
      }
    }

    .cardMain {
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      margin-bottom: 20px;
      padding-top: 13px;

      & > div {
        & > a {
          text-align: left;
        }

        & > .title {
          margin-right: 0;
          margin-bottom: 6px;

          .icon {
            vertical-align: baseline;
          }

          &:hover {
            text-decoration: none;
          }
        }

        .cardInterests {
          font-size: 14px;
          line-height: 19px;
          margin-bottom: 15px;
        }
      }

      & > a img {
        margin-right: 0;
      }

      & > div:nth-child(2) {
        margin: 0 50px 0 20px;
      }

      & > div:nth-child(3) {
        margin-left: auto;
      }

      & > a {
        flex: 0 0 auto;
      }

      // Integration note: To show/hide the blue bubble around the APPLY NOW button when the "Featured Card" text is present, toggle the featured class in the parent container. Child h4 should be removed/added with parent .featured class
      .featured {
        background-color: #e6f2fa;
        border: 1px solid #cce4f5;
        border-radius: 4px;
        padding: 10px;
      }

      .cardBtn {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        text-align: center;

        h4 {
          order: 1;
          color: #00233d;
          margin: 0;
        }

        .button {
          max-width: none;
          padding: 15px 45px;
          margin-bottom: 10px;
          background-color: #47a84c;
          background-image: none;
          border: 0;
          height: auto;
          font-weight: 500;
          line-height: 1;
          text-shadow: none;
        }

        & + a {
          display: block;
          font-size: 14px;
          line-height: 20px;
          text-align: center;
          padding-top: 7px;
        }
      }
    }

    .cardInfo {
      display: flex;
      align-items: center;
      border-top: 1px solid #ccc;
      border-bottom: 1px solid #ccc;
      padding: 15px 0;

      h3,
      p {
        font-size: 13px;
        line-height: 18px;
        margin: 0 0 5px 0;
      }

      img {
        margin-right: 25px;
      }
    }

    .cardDetails {
      & > div {
        width: 100%;
        max-width: 300px;

        .icon {
          color: #666;
          margin-left: 1px;
        }
      }

      @at-root .tooltipIcon {
        cursor: help;
        position: relative;

        .tooltipContent {
          background: #fff;
          border: 3px solid #e8e8e8;
          border-radius: 6px;
          font-family: "Open Sans", Arial, sans-serif;
          text-align: left;
          font-size: 12px;
          line-height: 17px;
          display: block;
          bottom: -13px;
          left: 25px;
          opacity: 0;
          padding: 10px 14px;
          pointer-events: none;
          position: absolute;
          width: 250px;
          box-shadow: 0 0 3px 0 rgba(0, 0, 0, 0.25);
          transform: translateY(10px);
          transition: all 0.7s ease-out;

          &::after,
          &::before {
            content: "";
            display: block;
            position: absolute;
            width: 0;
            height: 0;
            border-style: solid;
          }

          &::after {
            border-width: 11px;
            border-color: transparent #fff transparent transparent;
            left: -16px;
            bottom: 6px;
          }

          &::before {
            border-width: 8px;
            border-color: transparent #e8e8e8 transparent transparent;
            left: -18px;
            bottom: 9px;
          }
        }

        &:hover .tooltipContent {
          opacity: 1;
          pointer-events: auto;
          -webkit-transform: translateY(0px);
          -moz-transform: translateY(0px);
          -ms-transform: translateY(0px);
          -o-transform: translateY(0px);
          transform: translateY(0px);
        }
      }
    }

    .moreDetails {
      border: 0;
      display: block;
      padding-top: 0;
      overflow:hidden;
      transition:height 0.3s ease-out;
      height:auto;

      // &.hideList {
      //   display: none;
      // }

      ul {
        padding-bottom: 18px;
      }

      strong {
        padding-top: 20px;
        border-top: 1px solid #dddddd;
      }
    }
  }

  // Integration note: If card label (Featured) is present, padding top is increased to accommodate the optional absolutely positioned label element
  .cardLabel + div {
    padding-top: 45px;
  }

  .detailsLink {
    line-height: 1;
    border: 1px solid #ccc;
    border-top: 0;
    padding: 12px;
  }
}










// This stuff doesn't matter!
* {
  box-sizing:border-box;
}
body {
  margin:0;
  padding:10vh 10vw;
  font-family:arial;
}
p {
  margin:10px;
}
section {
  border: 3px solid #333;
  margin:0 auto;
  max-width:300px;
  border-radius:3px;
  
  div {
    border:3px solid #888;
  }
}
button {
  display:block;
  --webkit-appearance:none;
  font-size:18px;
  border:none;
  border-radius:3px;
  background:#333;
  color:white;
  margin:15px auto;
  padding:15px;
  cursor:pointer;
  
  transition:box-shadow 0.2s ease-out;
  
  &:hover {
    box-shadow:0px 0px 15px lightgrey;
  }
  &:active {
    box-shadow:0px 0px 10px lightgrey;
  }
  &:focus {
    outline:none;
  }
}


// This stuff matters!
section {
  
  div {
    overflow:hidden;
    transition:height 0.3s ease-out;
    height:auto;
  }
}