npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@flexilla/accordion

v2.0.3

Published

A versatile and interactive accordion component for creating collapsible sections in web applications, conserving space and improving user experience

Downloads

36

Readme

@flexilla/accordion

Installation

You can install the @flexilla/accordion package :

npm install @flexilla/accordion

Or

bun add @flexilla/accordion

Usage

To use the accordion component, follow these steps: Import the Accordion class from the @flexilla/accordion package:

import { Accordion } from '@flexilla/accordion';

Create an instance of the Accordion class by passing the required parameters:

const options = {
  // Specify any desired options here
};
const accordion = new Accordion('#accordion', options);

Note: The accordionElement should be a valid HTML element that acts as the container for the accordion.

You can Also Use the shortcup fAccordion : it will create for you an instance of Accordion

import { fAccordion } from '@flexilla/accordion';

fAccordion("#selector", options)

Props/Params

There's only two Params to provide, One is required and the second not

selector (required)

The selector of a HTML Element that acts as the container for the accordion

  • Items : Every item with data-accordion-item and data-accordion-value="item-value", and every accordion item must have a trigger data-accordion-trigger and content data-accordion-content

Options

There's two way to pass options:

  1. Provide an Options object
const options = {
  // Specify any desired options here
};

If using with TS, you can even import the type from accodion

import {Accordion, AccordionOptions} from "@flexilla/accordion"
const options:AccordionOptions = {

}
  1. Use data-attributes
<div data-my-accordion-1 data-default-value="accordion-1" data-accordion-type="single">
    <!-- here the content -->
</div>

Available options

| Option | Description | Data Attribute Equivalent | Type | | --------------------- | -------------------------------------------------------------------------------------------------------------------------------------- | ------------------------- | ------- | | preventClosingAll | Set to true if you don't want to allow closing all accordion items. Default is false. | data-prevent-closing-all | boolean | | allowTriggerOnFocus | Set to true if you want to trigger accordion item actions on focus. Default is false. | data-allow-trigger-on-focus | boolean | | accordionType | Specify the type of accordion. Default is single. | data-accordion-type | single or multiple | | defaultValue | Specify the default accordion item to be opened. | data-default-value | string |

Note: When passing options via data attributes, make sure to format the attribute values accordingly.

Methods

You can show or hide specific accordion items programmatically using the showItem and hideItem methods:

//Show An item
accordion.showItem('.accordion-item');
//Hide an item
accordion.hideItem('.accordion-item');

Examples

Here are a few examples to demonstrate the usage of the @flexilla/accordion package:

  1. For this Example I'm using UnoCSS for styling but you can use any CSS Library, Frameworkm or even write you're own CSS.
<div data-accordion-example data-default-value="accordion-item-2" data-accordion-type="single" class="space-y-2 bg-white rd-md">
    <div data-accordion-item data-accordion-value="accordion-item-1"
    class="rd-md">
        <button data-accordion-trigger aria-label="toggle button"
            class="px4 wfull flex justify-between items-center py2 text-gray8 dark-text-gray2 font-medium text-lg ease-linear hover-bg-gray2/50 dark-hover-bg-gray8/40 rd-md focus:outline-blue6 aria-expanded-text-blue6">
            Is it accessible?
        </button>
        <div aria-hidden="true" data-accordion-content
            class="text-gray7 dark-text-gray3 duration-200 ease-linear overflow-hidden">
            <p class="p4">
            Yes. It adheres to the WAI-ARIA design pattern.
            </p>
        </div>
    </div>
    <div data-accordion-item data-accordion-value="accordion-item-2"
    class="rd-md">
        <button data-accordion-trigger aria-label="toggle button"
            class="px4 wfull flex justify-between items-center py2 text-gray8 dark-text-gray2 font-medium text-lg ease-linear hover-bg-gray2/50 dark-hover-bg-gray8/40 rd-md focus:outline-blue6 aria-expanded-text-blue6">
            Is it unstyled?
        </button>
        <div aria-hidden="true" data-accordion-content
            class="text-gray7 dark-text-gray3 duration-200 ease-linear overflow-hidden">
            <p class="p4">
            Yes. It's unstyled by default, giving you freedom over the look and feel.
            </p>
        </div>
    </div>
    <div data-accordion-item data-accordion-value="accordion-item-3"
    class="rd-md">
        <button data-accordion-trigger aria-label="toggle button"
            class="px4 wfull flex justify-between items-center py2 text-gray8 dark-text-gray2 font-medium text-lg ease-linear hover-bg-gray2/50 dark-hover-bg-gray8/40 rd-md focus:outline-blue6 aria-expanded-text-blue6">
            Can it be animated?
        </button>
        <div aria-hidden="true" data-accordion-content
            class="text-gray7 dark-text-gray3 duration-200 ease-linear h0 overflow-hidden">
            <p class="p4">
            Yes! You can use the transition prop to configure the animation.
            </p>
        </div>
    </div>
</div>
<script>
  import { Accordion } from '@flexilla/accordion';
  const accordion = new Accordion("[data-accordion-example]");
</script>
  1. Custom options:
<div id="accordion" data-accordion-type="multiple" data-default-value="item2">
  <div class="accordion-item" data-accordion-item data-accordion-value="item1">
    <button data-accordion-trigger>
    Trigger content
    </button>
    <div data-accordion-content>
    Accordion Content
    </div>
  </div>
  <!-- other items -->
</div>
<script>
  import { Accordion } from '@flexilla/accordion';

  const options = {
    preventClosingAll: false,
    allowTriggerOnFocus: true,
  };
  const accordion = new Accordion("#accordion", options);
</script>

That's it! You can now use the @flexilla/accordion package to create interactive accordion menus in your web applications.