How Do I Add an Accordion to Webflow?

Adding an accordion to your Webflow site can be a great way to organize and present information in a sleek and user-friendly manner. With a few simple steps, you can create an accordion that expands and collapses sections of content with just a click. In this tutorial, we will walk through the process of adding an accordion to your Webflow project.

Step 1: Setting up the HTML structure

To begin, open your Webflow project and navigate to the page where you want to add the accordion. Start by adding a <div> element that will serve as the container for your accordion.

Give it a class name like “accordion-container”. Inside this container, you will add multiple sections – each section represents an accordion item.

Inside the “accordion-container”, add another <div> for each section of the accordion. Give each section a class name like “accordion-item”. Within each “accordion-item” div, create two child elements – one for the heading and another for the content.

The HTML structure should look like this:

<div class="accordion-container">
  <div class="accordion-item">
    <h2 class="accordion-heading">Accordion Item 1</h2>
    <p class="accordion-content">Content for Accordion Item 1</p>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-heading">Accordion Item 2</h2>
    <p class="accordion-content">Content for Accordion Item 2</p>
  </div>

  <div class="accordion-item">
    <h2 class="accordion-heading">Accordion Item 3</h2>
    <p class="accordion-content">Content for Accordion Item 3</p>
  </div>

</div>

Step 2: Styling the accordion

Now that you have set up the basic HTML structure for the accordion, you can add some CSS to style it. Open the Webflow Designer and select the “Custom Code” section for your page. Inside the <style> tags, we will write some CSS to style our accordion.

First, let’s style the “accordion-heading”. Add the following CSS code:

.accordion-heading {
  font-weight: bold;
  cursor: pointer;
}

This will make the heading text bold and change the cursor to a pointer when hovering over it.

Next, let’s style the “accordion-content”.accordion-content {
display: none;
}

This will initially hide the content of each accordion item.

Step 3: Adding interactivity with JavaScript/jQuery

To make our accordion functional, we need to add some JavaScript/jQuery code that will handle expanding and collapsing sections when clicked. In Webflow, you can easily add custom code using their built-in custom code functionality.

Navigate to your Webflow project and open your page in the Designer. Select “Custom Code” from the left-hand panel and click on “Add Custom Code”. Choose “Before ” and paste the following code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
  $(".accordion-heading").click(function(){
    $(this).next(".accordion-content").slideToggle();
  });
});
</script>

This code adds a click event listener to each heading element with the class “accordion-heading”. When a heading is clicked, it will find the next element with the class “accordion-content” and toggle its visibility using slide animation.

Step 4: Preview and customize

Now you can preview your Webflow project to see the accordion in action. Each section should expand or collapse when you click on its respective heading.

You can further customize the styling of the accordion by adding more CSS rules to your Webflow project. Experiment with colors, fonts, and animations to make it match your site’s overall design.

Conclusion

Congratulations! You have successfully added an accordion to your Webflow site.

By using HTML, CSS, and a little bit of JavaScript/jQuery, you were able to create an interactive and visually engaging element that enhances user experience. Feel free to experiment with different styling options and expand upon this basic implementation to suit your specific needs.