@xexiu/astro-accordion NPM

🚀 `astro-modal`

Downloads

HELLO there 👋

Twitter: https://twitter.com/xexiudev drop by and say hi, follow me and I follow you. Let's build a community.

ASTRO ACCORDION: HTML, CSS and a bit of javascript made with Custom Elements accordion for astro. Uses API from browsers. Compatible with web/mobile, responsive, HTML5 semantic, SEO friendly. Lighthouse score 100%. Accesibility (ARIA attrs)
Uses Custom Elements for a better optimization: customElements.define('xe-accordion', Accordion);
Forking and giving a star will contribute to my motivation in making components for astro (react, react-native, etc...) that are purely HTML, CSS, SEO friendly and responsive :) (almost all components :P).
DEMO: Astro Accordion This product is actively mantained. Any PR, issues or whatever concern, please visit the Github repository https://github.com/xexiu/astro-components.

Tutorials Roadmap

Web2: JavaScript, HTML, CSS, Node.js, Python (MLL, AI), React, NextJS React Native and more.
Web3: Blockchain, WEB3, dApps, smart contracts and more.

📦 Installation

Using bun:

bun i @xexiu/astro-accordion

Using npm:

npm i @xexiu/astro-accordion

🔁 API

interface Props {
   isExpanded?: boolean[] // Optional - by default, accordion is not expanded;
   titles: string[] // Required;
   content: any[] // Required;
   btnClasses?: string // Optional;
   regionClasses?: string // Optional;
}

🛠 Usage in astro

---
import Accordion from '@xexiu/astro-accordion';

const content = [
   'Hae duae provinciae bello quondam piratico catervis mixtae praedonum a Servilio pro <a href="#focusable">focusable link for test</a> consule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.',
   'Hae duae <a href="#focusable">focusable link for test</a> provinciaebello quondam piratico catervis mixtae praedonum a Servilio proconsule missae sub iugum factae sunt vectigales. et hae quidem regiones velut in prominenti terrarum lingua positae ob orbe eoo monte Amano disparantur.',
   'Content 3'
];
---

<div>titles and content length must match</div>

<Accordion
   titles={[
      'Accordion heading 1',
      'Accordion heading 2',
      'Accordion heading 3'
   ]}
   content={content}
   isExpanded={[true, false, false]}
/>