Enter

Resources

    Icons (SVG)

      We couldn't found a match for "Lorem ipsum"

      Welcome to the Vault 👋

      Hey Name, we are super excited to have you on board. Thanks for the support and hopefully Osmo becomes your go-to place for inspiration and development tips-and-tricks. Enjoy! - Ilja & Dennis

      0:00

      GSAP Discount Code

      Cassie from GSAP has kindly offered Osmo users an exclusive 25% discount on Club GSAP. Redeem it by applying the code below at checkout.

      Already a GSAP Club subscriber?
      Email info@greensock.com, and they’ll assist you in getting a 25% discount on your renewal.

      OSMO25

      Get Club GSAP

      -25%

      Osmo Slack Community

      Help, share, and inspire each other—this is the space to talk about animations all day long and connect with other Osmo members.

      Join Slack Community

      Need help?

      Unfortunately, we don’t currently have the capacity to answer all questions individually—but that’s why we created the Osmo community!

      It’s a space where members can come together to share tips, troubleshoot, and collaborate. Whether you’re dealing with a tricky bug, need advice, or just want to connect with like-minded creatives, our community is here for you.

      Join Slack Community

      Copied SVG to clipboard
      Something went wrong
      Copied code to clipboard
      Something went wrong

      Default

      User image

      Default

      Name

      • Osmo Discount
        -25%
      The Vault/

      Accordion CSS Animation

      Search
      K
      Accordion CSS Animation

      Live Preview

      Documentation

      Webflow

      Code

      Setup: External Scripts

      External Scripts in Webflow

      Make sure to always put the External Scripts before the Javascript step of the resource.

      In this video you learn where to put these in your Webflow project? Or how to include a paid GSAP Club plugin in your project?

      Watch the video

      HTML

      Copy

      Step 1: Copy structure to Webflow

      Copy structure to Webflow

      In the video below we described how you can copy + paste the structure of this resource to your Webflow project.

      Watch the video

      Copy to Webflow

      Webflow structure is not required for this resource.

      Step 1: Add HTML

      HTML

      Copy
      <div data-accordion-close-siblings="true" data-accordion-css-init="" class="accordion-css">
  <ul class="accordion-css__list">
    <li data-accordion-status="not-active" class="accordion-css__item">
      <div data-hover="" data-accordion-toggle="" class="accordion-css__item-top">
        <h3 class="accordion-css__item-h3">This is just a simple CSS Accordion</h3>
        <div class="accordion-css__item-icon">
          <svg class="accordion-css__item-icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 36 36" fill="none"><path d="M28.5 22.5L18 12L7.5 22.5" stroke="currentColor" stroke-width="3" stroke-miterlimit="10"></path></svg>
        </div>
      </div>
      <div class="accordion-css__item-bottom">
        <div class="accordion-css__item-bottom-wrap">
          <div class="accordion-css__item-bottom-content">
            <p class="accordion-css__item-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>
    </li>
    <li data-accordion-status="not-active" class="accordion-css__item">
      <div data-hover="" data-accordion-toggle="" class="accordion-css__item-top">
        <h3 class="accordion-css__item-h3">Choose to close the siblings: true/false</h3>
        <div class="accordion-css__item-icon">
          <svg class="accordion-css__item-icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 36 36" fill="none"><path d="M28.5 22.5L18 12L7.5 22.5" stroke="currentColor" stroke-width="3" stroke-miterlimit="10"></path></svg>
        </div>
      </div>
      <div class="accordion-css__item-bottom">
        <div class="accordion-css__item-bottom-wrap">
          <div class="accordion-css__item-bottom-content">
            <p class="accordion-css__item-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>
    </li>
    <li data-accordion-status="not-active" class="accordion-css__item">
      <div data-hover="" data-accordion-toggle="" class="accordion-css__item-top">
        <h3 class="accordion-css__item-h3">Super easy, try it for yourself!</h3>
        <div class="accordion-css__item-icon">
          <svg class="accordion-css__item-icon-svg" xmlns="http://www.w3.org/2000/svg" width="100%" viewbox="0 0 36 36" fill="none"><path d="M28.5 22.5L18 12L7.5 22.5" stroke="currentColor" stroke-width="3" stroke-miterlimit="10"></path></svg>
        </div>
      </div>
      <div class="accordion-css__item-bottom">
        <div class="accordion-css__item-bottom-wrap">
          <div class="accordion-css__item-bottom-content">
            <p class="accordion-css__item-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>
    </li>
  </ul>
</div>

      HTML structure is not required for this resource.

      Step 2: Add CSS

      CSS

      Copy
      .accordion-css {
  max-width: 29em;
  position: relative;
}

.accordion-css__list {
  grid-column-gap: .5em;
  grid-row-gap: .5em;
  flex-flow: column;
  margin-top: 0;
  margin-bottom: 0;
  padding-left: 0;
  display: flex;
  position: static;
}

.accordion-css__item {
  background-color: #efeeec;
  border-radius: .5em;
  list-style: none;
}

.accordion-css__item-top {
  grid-column-gap: 1em;
  grid-row-gap: 1em;
  cursor: pointer;
  justify-content: space-between;
  align-items: center;
  padding: 1em 1em 1em 1.5em;
  display: flex;
}

.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  grid-template-rows: 0fr;
  display: grid;
  position: relative;
  overflow: hidden;
}

[data-accordion-status="active"] .accordion-css__item-bottom {
   grid-template-rows: 1fr;
}

.accordion-css__item-bottom-wrap {
  flex-flow: column;
  height: 100000%;
  display: flex;
  position: relative;
  overflow: hidden;
}

.accordion-css__item-bottom-content {
  padding-bottom: 1.5em;
  padding-left: 1.5em;
  padding-right: 1.5em;
}

.accordion-css__item-h3 {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 1.125em;
  font-weight: 500;
  line-height: 1.3;
}

.accordion-css__item-icon {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
  background-color: #d4cee5;
  border-radius: 50%;
  flex-shrink: 0;
  justify-content: center;
  align-items: center;
  width: 2em;
  height: 2em;
  display: flex;
  transform: rotate(180deg);
}

[data-accordion-status="active"] .accordion-css__item-icon {
   transform: rotate(0.001deg);
}

.accordion-css__item-icon-svg {
  width: 1em;
}

.accordion-css__item-p {
  color: #2c2c2c;
  margin-bottom: 0;
  font-size: .875em;
  line-height: 1.5;
}

      Step 2: Add custom Javascript

      Custom Javascript in Webflow

      In this video, Ilja gives you some guidance about using JavaScript in Webflow:

      Watch the video

      Step 2: Add Javascript

      Step 3: Add Javascript

      Javascript

      Copy
      document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('[data-accordion-css-init]').forEach((accordion) => {
    const closeSiblings = accordion.getAttribute('data-accordion-close-siblings') === 'true';

    accordion.addEventListener('click', (event) => {
      const toggle = event.target.closest('[data-accordion-toggle]');
      if (!toggle) return; // Exit if the clicked element is not a toggle

      const singleAccordion = toggle.closest('[data-accordion-status]');
      if (!singleAccordion) return; // Exit if no accordion container is found

      const isActive = singleAccordion.getAttribute('data-accordion-status') === 'active';
      singleAccordion.setAttribute('data-accordion-status', isActive ? 'not-active' : 'active');
      
      // When [data-accordion-close-siblings="true"]
      if (closeSiblings && !isActive) {
        accordion.querySelectorAll('[data-accordion-status="active"]').forEach((sibling) => {
          if (sibling !== singleAccordion) sibling.setAttribute('data-accordion-status', 'not-active');
        });
      }
    });
  });
});

      Step 3: Add custom CSS

      Step 2: Add custom CSS

      Custom CSS in Webflow

      Curious about where to put custom CSS in Webflow? Ilja explains it in the below video:

      Watch the video

      CSS

      Copy
      /* Animate Accordion Bottom Grid */
.accordion-css__item-bottom {
  transition: grid-template-rows 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-bottom {
   grid-template-rows: 1fr;
}

/* Animate Icon */
.accordion-css__item-icon {
  transition: transform 0.6s cubic-bezier(0.625, 0.05, 0, 1);
}

[data-accordion-status="active"] .accordion-css__item-icon {
   transform: rotate(0.001deg);
}

      Implementation

      Close siblings [true/false]

      You can set [data-accordion-close-siblings="false"] to prevent the accordion from closing sibling items when toggling an item.

      jQuery version

      $(document).ready(function() {
  $('[data-accordion-css-init]').each(function() {
    var accordion = $(this);
    var accordionCloseSiblings = accordion.attr('data-accordion-close-siblings') === 'true';

    accordion.on('click', '[data-accordion-toggle]', function() {
      var singleAccordion = $(this).closest('[data-accordion-status]');

      if (singleAccordion.attr('data-accordion-status') === 'active') {
        singleAccordion.attr('data-accordion-status', 'not-active');
      } else {
        // Close siblings if specified
        if (accordionCloseSiblings) {
          singleAccordion.siblings('[data-accordion-status="active"]').attr('data-accordion-status', 'not-active');
        }
        singleAccordion.attr('data-accordion-status', 'active');
      }
    });
  });
});
      Search
      K

      Live Preview

      Resource Details

      Accordion
      FAQ
      Dropdown
      Toggle
      CSS
      Animation
      Arrow
      Card
      Javascript

      Original source

      Osmo

      Creator Credits

      We always strive to credit creators as accurately as possible. While similar concepts might appear online, we aim to provide proper and respectful attribution.