react-accordion-best4seo v1.0.2

Accordion Component 📚

A simple and accessible React accordion component. It allows you to toggle content sections with smooth transitions. This component also includes built-in accessibility features.

Features 🌟

Toggle Functionality: Click the header to toggle between open and closed states. Accessible: Uses ARIA attributes like aria-expanded and aria-controls for better accessibility. Customizable Styles: Style it with your own CSS or use the included styles. Installation 💻 Install the component via npm:

bash Copy Edit npm install accordion-component

Usage 🚀

To use the Accordion component, import it and use it as follows:

import React from 'react';
import Accordion from 'accordion-component'; // Import Accordion component
import './Accordion.css'; // Import the CSS file

function App() {
  return (
    <div>
      <Accordion heading="Accordion 1" id="1">
        <p>This is the content of the first accordion.</p>
      </Accordion>
      <Accordion heading="Accordion 2" id="2">
        <p>This is the content of the second accordion.</p>
      </Accordion>
    </div>
  );
}

export default App;

Props 🛠️

heading (string): The title of the accordion header. id (string): A unique identifier for each accordion item. Used for accessibility. children (node): The content that will be revealed when the accordion is opened. Styles 🎨 You can style the accordion component using the provided Accordion.css file or by customizing your own styles.

Default Styles 📝 Here’s a preview of the default CSS for the Accordion component:

/* Accordion.css */

/* Base styles for the accordion component */
.accordion {
  border: 1px solid #ccc;
  border-radius: 5px;
  margin-bottom: 10px;
}

.accordion-header {
  background-color: #f7f7f7;
  padding: 10px;
  cursor: pointer;
}

.accordion-heading {
  font-size: 16px;
  font-weight: bold;
  margin: 0;
}

.accordion-toggle {
  background: none;
  border: none;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  text-align: left;
  width: 100%;
  padding: 0;
}

.accordion-body {
  padding: 15px;
  background-color: #ffffff;
  display: none;
  transition: max-height 0.3s ease;
}

.accordion-open .accordion-body {
  display: block;
}

.accordion-icon {
  margin-left: 10px;
}

.icon-closed,
.icon-open {
  width: 16px;
  height: 16px;
}

.icon-closed polyline,
.icon-open polyline {
  fill: none;
  stroke: #000;
  stroke-width: 2;
}

Customizing Styles 🖌️

You can override the default styles by adding your own CSS rules. For example:

/* Custom styles for the accordion */
.accordion-header {
  background-color: #4CAF50;  /* Custom background color */
}

.accordion-body {
  background-color: #f0f0f0;  /* Custom content area background */
}

License 📝

This project is licensed under the MIT License. See the LICENSE file for more details.