https://github.com/nickrigby/silc-accordion

Lightweight accordion/tabs component for the silc framework
https://github.com/nickrigby/silc-accordion

accordion typescript

Last synced: 2 months ago
JSON representation

Lightweight accordion/tabs component for the silc framework

• Host: GitHub
• URL: https://github.com/nickrigby/silc-accordion
• Owner: nickrigby
• License: mit
• Created: 2017-04-02T20:41:17.000Z (about 8 years ago)
• Default Branch: master
• Last Pushed: 2023-01-07T03:20:23.000Z (over 2 years ago)
• Last Synced: 2024-04-14T19:56:33.783Z (about 1 year ago)
• Topics: accordion, typescript
• Language: TypeScript
• Homepage: https://silc.io
• Size: 2.34 MB
• Stars: 1
• Watchers: 3
• Forks: 1
• Open Issues: 24
• Metadata Files:
  • Readme: readme.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
# silc Accordion [![Build Status](https://travis-ci.org/nickrigby/silc-accordion.svg?branch=master)](https://travis-ci.org/nickrigby/silc-accordion) [![npm version](https://badge.fury.io/js/silc-accordion.svg)](https://badge.fury.io/js/silc-accordion)

The accordion module is an ultra-lightweight web component for the [silc framework](https://github.com/nickrigby/silc). The accordion module is capable of pure accordions, accordions that become tabs, or pure tabs.

## HTML

```html



    


         

             Accordion 1

         

         


             


                 
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Quod perferendis architecto deserunt, et libero culpa obcaecati ab possimus laborum quibusdam, eum harum accusamus. Quisquam, facere suscipit hic maiores voluptatibus perspiciatis?

             

         

    

    


        

            Accordion 2

        

        


            


                
Lorem ipsum dolor sit amet consectetur adipisicing elit. Harum, id inventore! Labore vel, mollitia quae cum quibusdam, dolore harum doloribus dicta adipisci iusto eligendi consectetur nam, impedit quia atque in.

            

        

    



```


### Accordion that becomes tabs

```html



    


        

            Tab 1

        

        


            


                
Tab 1 content

            

        

    

    


        

            Tab 2

        

        


            


                
Tab 2 content

            

        

    

    


        

            Tab 3

        

        


            


                
Tab 3 Content

            

        

    



```


### Tabs

```html



    


        

            Tab 1

        

        


            


                
Tab 1 Content

            

        

    

    


        

            Tab 2

        

        


            


                
Tab 2 Content

            

        

    

    


        

            Tab 3

        

        


            


                
Tab 3 Content

            

        

    



```


## Class modifiers

### Tabs navigation width

Tabs can be set to "stretch" to the entire length of the tabs container by adding the modifier `silc-accordion--stretch-tabs`

```html



...



```


## Options

The functionality of the accordion can be modified by adding JavaScript data attributes.

 - Open first accordion by default: `data-silc-accordion-open-first`

 - Allow multiple content areas to be open: `data-silc-accordion-open-multiple`

 - Allow slide animations for accordions: `data-silc-accordion-animated`

## Styling

As with all silc components, no deliberate style has been added. However, through a SASS fallback system, a number of [SASS variables](src/scss/_variables.scss) are available to easily apply design without having to write your own selectors.