Foundation CSS Accordion

Foundation CSS provides an accordion component that allows you to create collapsible content sections. Accordions are useful for organizing and presenting content in a structured and space-efficient manner. Here's how to create an accordion using Foundation CSS:

1. HTML Structure

First, define the HTML structure for the accordion. Each accordion item consists of a heading (to trigger the accordion) and a content section (to be collapsed or expanded).

<div class="accordion" data-accordion>
  <div class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion Item 1</a>
    <div class="accordion-content" data-tab-content>
      Content of Accordion Item 1
    </div>
  </div>
  <div class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion Item 2</a>
    <div class="accordion-content" data-tab-content>
      Content of Accordion Item 2
    </div>
  </div>
</div>

2. Initialization

Next, initialize the accordion using JavaScript. Call the $(document).foundation() method to initialize Foundation JavaScript components, including the accordion.

$(document).foundation();

This initialization code should be placed at the end of your HTML document, just before the closing </body> tag.

3. Styling

Style the accordion using CSS to customize its appearance, such as colors, borders, and spacing.

/* Custom styles for accordion */
.accordion-title {
  background-color: #f4f4f4;
  color: #333;
  padding: 10px;
  display: block;
  text-decoration: none;
}
.accordion-title:hover {
  background-color: #e0e0e0;
}
.accordion-content {
  padding: 10px;
  background-color: #fff;
  border: 1px solid #ddd;
}

4. Example

Here's an example of a basic accordion implemented using Foundation CSS:

<div class="accordion" data-accordion>
  <div class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion Item 1</a>
    <div class="accordion-content" data-tab-content>
      Content of Accordion Item 1
    </div>
  </div>
  <div class="accordion-item" data-accordion-item>
    <a href="#" class="accordion-title">Accordion Item 2</a>
    <div class="accordion-content" data-tab-content>
      Content of Accordion Item 2
    </div>
  </div>
</div>

Conclusion

Using Foundation CSS accordion component, you can create collapsible content sections easily. By following the HTML structure, initializing the accordion with JavaScript, and styling it with CSS, you can customize the accordion to suit your design requirements.

Archive