Accordions pure css accordion with animation

Class method on what
accordion item in accordions; accordion could live alone
accordions list in accordion
arrow in label of accordion display arrow in header
animated on accordion
hoverable on accordion will keep open accordion when hover
focusable on accordion will keep open accordion when focused
label-hide on accordion will hide header when accordion is open
grid columns on accordions display accordion as grid

Cases of use

animated #

we will show content

we will show content

we will show content

          
            

  

    
    
    

      
we will show content

    

  

  

    
    
    

      
we will show content

    

  

  

    
    
    

      
we will show content

hoverable #

we will show content

we will show content

we will show content

          
            

  
  

    
we will show content

  





  
  

    
we will show content

  





  
  

    
we will show content

focusable animated #

Accordion 1

we will show content

we will show content 1

Accordion 2

we will show content

we will show content 1

Accordion 3

we will show content

we will show content 1

          
            

  Accordion 1 
  

    
we will show content

    
we will show content 1

  





  Accordion 2 
  

    
we will show content

    
we will show content 1

  





  Accordion 3 
  

    
we will show content

    
we will show content 1

label hide #

we will show content 1
we will show content 2
          
            

  
  
  
we will show content 1





  
  
  
we will show content 2

grid column #

we will show content

we will show content 1

we will show content

we will show content 1

we will show content

we will show content 1

we will show content

we will show content 1

          
            

  
  

    
    
    

      
we will show content

      
we will show content 1

    

  

  

    
    
    

      
we will show content

      
we will show content 1

    

  

  

    
    
    

      
we will show content

      
we will show content 1

    

  

  

    
    
    

      
we will show content

      
we will show content 1

Setup #

classes #

    
      @accordions: accordions;
@accordion: accordion;
@accordion-label: label;
@accordion-content: content;
@accordion-collapsible: accordion-collapsible;
@accordion-label-hide: label-hide;
@accordion-horizontal: horizontal;
@accordion-focusable: focusable;
@accordion-animated: animated;
@accordion-hoverable: hoverable;
@accordion-arrow: arrow;

variables #

    
      @accordion-animated-max-height: 200vh;
@accordion-animated-time: 1s;