Create smooth accordions animations with almost no javascript with code examples

CSS Accordion animation

In web development, accordions are a commonly used UI pattern for displaying content in a collapsible format, making them ideal for menus, FAQs, and content-heavy websites. What makes this accordion animation particularly interesting is that it relies mostly on CSS, with minimal JavaScript to toggle the visibility of the content. In this post, we'll dive into the technical implementation of a simple accordion animation with code examples, starting from a basic single-accordion design and then expanding it to include multiple accordions and improved styling.

The first step in creating a collapsible accordion involves both HTML structure and minimal CSS for the styling and animations. Let's break down the code:

HTML

Javascript

React

Result

<div class="accordion">: This div encapsulates the entire accordion element. 

<div class="accordion__title">: The title section of the accordion, which will be clicked to trigger the reveal of the hidden content.

<div class="accordion__dropdown">: The hidden content that will expand and contract based on the user’s interaction.

The JavaScript part here is incredibly simple. We use querySelector to target the .accordion__title element and attach an event listener that listens for the click event.

When the title is clicked, we toggle the accordion--visible class on the parent .accordion div. This class will control the visibility and height of the hidden content.

The accordion container is set to use display: grid, which allows us to define the row sizes with grid-template-rows. Initially, the dropdown content (.accordion__dropdown) has a height of 0 (effectively hidden) and visibility: hidden.

When the .accordion--visible class is added, the grid-template-rows property changes, and the dropdown content becomes visible with a smooth transition (transition: all 0.4s ease).

This makes the hidden content smoothly expand into view when toggled.

Now let's take it a step further by handling multiple accordion elements on the same page. This requires slightly more intricate HTML structure and some additional styling to ensure that the accordions work seamlessly.

Second Example: Multiple Accordions with Enhanced Styles

SCSS

This time, we have multiple accordion containers on the page. Each container has a .accordion__title and a .accordion__dropdown section, making the content collapsible on an individual basis.

In this case, the script now uses querySelectorAll to grab all the accordion titles (.accordion__title) and attach event listeners to each of them. This ensures that all accordions on the page are interactive.

An icon that rotates based on the state has been added to show if the dropdown is visible or not. We have used Eva Icons for this example.

In a real-world application, you can further optimize the design by adding features like automatic collapsing of other accordions when one is opened or using aria-expanded attributes for better accessibility.

This technique demonstrates the power of modern CSS and its ability to create interactive elements with almost no JavaScript.

We provide retailers with unique, always-up-to-date pages that require minimal effort to integrate. By copying just a few lines of code, retailers can seamlessly embed a dedicated page showcasing their exclusive offers, and other relevant financial data.

At Snap, we provide retailers with unique, always-up-to-date pages that require minimal effort to integrate. By copying just a few lines of code, retailers can seamlessly embed a dedicated page showcasing their exclusive offers, and other relevant financial data.

Always Up-To-Date Pages in Retailers' websites

At Snap, we provide retailers with unique, always-up-to-date pages that require minimal effort to integrate. By copying just a few lines of code, retailers can seamlessly embed in their website a dedicated page showcasing their exclusive offers, a loan calculator, and other relevant financial data. This approach simplifies the process for non-technical users, as it requires only basic knowledge of their CRM.

We support integration with over 10+ CRMs, providing detailed step-by-step guides tailored to each platform. Once a retailer partners with Snap, they receive a link containing the necessary setup instructions, making the onboarding process swift and frictionless.

The retailer signs up with Snap and receives a personalized integration link.

They copy and paste a small HTML snippet into their website or CRM.

The page dynamically loads, fetching and rendering content directly from Snap’s servers.

Here’s an simplified example of the HTML snippet that retailers insert:

<div id="snapfinance-page"></div>

<script>
  (function () {
    const snapContainer = document.getElementById('snapfinance-page');
    snapContainer.attachShadow({ mode: 'open' });

    const loadingDiv = document.createElement('div');
    loadingDiv.innerHTML = {{loading_template}};
    snapContainer.shadowRoot.appendChild(loadingDiv);

    fetch({{super_secret_url_with_super_secret_token}})
      .then(async (res) => {
        const { html, script } = await res.json();

        const pageDiv = document.createElement('div');
        pageDiv.innerHTML = html;
        snapContainer.shadowRoot.appendChild(pageDiv);

        const pageScript = document.createElement('script');
        pageScript.innerHTML = script;
        snapContainer.shadowRoot.appendChild(pageScript);
      })
      .catch((error) => {
        const pageDiv = document.createElement('div');
        pageDiv.innerHTML = {{error_template}};
        snapContainer.shadowRoot.appendChild(pageDiv);
      })
      .finally(() => {
        snapContainer.shadowRoot.removeChild(
          snapContainer.shadowRoot.firstElementChild
        );
      });
  })();
</script>

This script ensures that retailers' pages are always up-to-date by dynamically fetching content from Snap’s servers on every request. Here’s a breakdown of how it functions:

· The script initializes a shadowRoot within the #snapfinance-page container. This ensures that styles and scripts are isolated, preventing conflicts with the retailer’s existing site.

· A loading template is injected while the actual content is being retrieved.

· The script makes an asynchronous request to a Snap-hosted API endpoint ({{super_secret_url_with_super_secret_token}}).
· The response contains a page template (HTML content) and a script (additional JavaScript logic).

· The received html page is injected into the Shadow DOM, rendering the main content.
· A script element is created dynamically, injecting the script to enhance interactivity.

· Our systems are up over 99.99% of the time, but if for some reason the fetch request fails, a fallback error message will be displayed.

· The initial loading template is removed once the content is successfully loaded.

Retailers do not need to worry about maintaining the content themselves. The Snap-hosted solution ensures that every update, promotion, or financial tool appears on their site instantly without manual intervention.

By embedding an offer page that remains fresh and relevant, retailers can improve engagement and conversion rates. Customers always see the latest financing options and incentives without any outdated information.

Since all content is fetched dynamically, retailers never have to update the page manually. This minimizes technical debt and reliance on development teams for maintenance.

With support for over 10 CRMs, our solution is versatile and adapts to various retailer ecosystems, making it easy to implement regardless of the platform.

Data is served securely via Snap’s infrastructure, ensuring that only authorized retailers with a valid client ID can display their custom pages. The Shadow DOM encapsulation further enhances security by preventing malicious tampering.

The application is fully responsive and meticulously optimized to deliver a seamless user experience across all devices, browsers, and screen sizes.

Our innovative approach to dynamic page embedding allows retailers to integrate financing options effortlessly while ensuring the content is always up to date. By leveraging the power of JavaScript, Shadow DOM, and Server-Side-Rendering, we provide a robust, scalable, and secure solution that benefits both businesses and their customers.

With just a few lines of code, retailers can offer a seamless, user-friendly financing experience, increasing engagement and sales without technical overhead. If you're a retailer looking to enhance your website with real-time financing offers, Snap makes it easier than ever!

If you have already partnered with Snap but haven't got your custom page yet, contact us to get started. Our team is ready to assist you in integrating your unique, always-up-to-date Snap page with minimal effort!

Dynamic Retailer pages

Snap have partnered with Shopify, one of the leading e-commerce platforms, to provide an easy way for retailers to offer Snap at checkout.

Shopify Payment App

We are thrilled to announce a significant milestone for Snap Finance and our valued merchants using Shopify.

At Snap Checkout, our mission has always been to provide seamless and secure finance solutions that empower businesses to thrive in the digital landscape. With our Shopify partnership, we're taking another step forward in fulfilling this commitment.

Streamlined Checkout Experience: Say goodbye to cumbersome checkout processes. With Snap seamlessly integrated into your Shopify store, your customers can enjoy a frictionless checkout experience, leading to higher conversion rates and increased customer satisfaction.

Enhanced Security: Security is our top priority at Snap. Our integration with Shopify ensures that all transactions are encrypted and fully secure, giving you and your customers peace of mind.

Seamless Integration: Whether you're a small boutique or a large enterprise, integrating Snap into your Shopify store is quick and hassle-free. Our team is here to support you every step of the way, ensuring a smooth transition.

Continue with ease : With Snap, your customers can apply through various methods including directly on our website, so making sure they can find their approval in your checkout was imperative to the build of this app.

There's lots more information about our integration on our website.

Stay tuned for more updates and exciting developments from Snap!

Blog