Accordion

Accordion is a vertically collapsing element to show and hide content via class changes.

Default

The default accordion view.

sample data 1

Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.

sample data 2

sample data 3


    import React from 'react';
    import Accordion from '@neoKit/accordion';
    
    const AccordionExample = () => {
      return(
        <Accordion>
        <AccordionItem>
           <AccordionHeadding>
               sample data 1
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>
        <AccordionItem>
           <AccordionHeadding>
               sample data 2
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>   
        <AccordionItem>
           <AccordionHeadding>
               sample data 3
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>    
    </Accordion>
      ) 
      
    };
    
    export default AccordionExample;

Open All

initiall all fields are opened

sample data 1

sample data 2

sample data 3


    import React from 'react';
    import Accordion from '@neoKit/accordion';
    
    const AccordionOpenAllExample = () => {
      return(
        <Accordion isOpen>
        <AccordionItem>
           <AccordionHeadding>
               sample data 1
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>
        <AccordionItem>
           <AccordionHeadding>
               sample data 2
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>   
        <AccordionItem>
           <AccordionHeadding>
               sample data 3
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>    
    </Accordion>
      ) 
      
    };
    
    export default AccordionOpenAllExample;

Disabled

The user can disable the specific field

sample data 1

sample data 2

sample data 3


    import React from 'react';
    import Accordion from '@neoKit/accordion';
    
    const  AccordionDisabledExample = () => {
      return(
        <Accordion isOpen>
        <AccordionItem>
           <AccordionHeadding>
               sample data 1
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>
        <AccordionItem isDisabled>
           <AccordionHeadding>
               sample data 2
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>   
        <AccordionItem>
           <AccordionHeadding>
               sample data 3
           </AccordionHeadding>
           <AccordionPannel>
               Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, vitae, rem corrupti consectetur nisi explicabo cumque fugit asperiores consequatur praesentium, at atque repellendus tempora laudantium odit doloribus dolore earum veniam.
           </AccordionPannel>
        </AccordionItem>    
    </Accordion>
      ) 
      
    };
    
    export default AccordionDisabledExample;