Toggle

To create a toggled content element, you need a title and content element wrapped within a parent element with class fs-toggle. Your title element can be any heading element, but must have class toggle-title added to trigger the toggle functionality. And your content element must have class toggle-content in order to be toggleable.

    
What is the meaning of life?

    

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
        
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
    

And below you can see how a toggle responds when placed in a parent element with a dark background and class text-light.

It is also possible for a toggle to be open on the initial page load. You can do this by adding class toggle-expanded to the .fs-toggle element.

    
What is the meaning of life?

    

        
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
        
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
    

Toggle Headings

Because you can use any kind of heading for your .toggle-title element, there are many different results you can achieve.

    
What is the meaning of life?

    

    
What is the meaning of life?

    

    
What is the meaning of life?

    

    
What is the meaning of life?

    

    
What is the meaning of life?

    

    
What is the meaning of life?

    

    What is the meaning of life?

    

    What is the meaning of life?

    

    What is the meaning of life?

    

    What is the meaning of life?

    

    Toggle Me

    

    Toggle Me

    

    Toggle Me

    

    Toggle Me

    

Toggle Link Headings

If you prefer to have the hover effect of a standard link, you can also mix heading classes and links together.

For example, the following uses an <a> tag with class h3 to give it the styling of an <h3> tag, but with the hover effect of a standard link.

    What is the meaning of life?

    

And of course, you can use any of the heading-* classes, as well, on an <a> tag.

    What is the meaning of life?

    

Grouped Toggles

For a set of toggles to appear visually closer to eachother, you can group them by wrapping them in a parent element with class toggle-group.

    


        
First Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    


    


        
Second Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    


    


        
Third Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    

And here you can see how a toggle group will look within a parent element with dark background and class text-light.

Accordion

The accordion functionality can be added to a .toggle-group element by adding class toggle-accordion. When a group of toggles has the accordion functionality added, it means that there can never be more than one toggle open in a group, at one time.

    


        
First Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    


    


        
Second Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    


    


        
Third Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    

And the accordion functionality is a logical place where you may want to incorporate the toggle-expanded class we discussed in the start of the article. For example, below is the accordion from above, but with the first toggle open on the initial page load. Notice that the toggle-expanded has simply been added to the first .fs-toggle element.

    


        
First Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    


    


        
Second Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.
        


    


    


        
Third Toggle Item

        

            
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin tempus quis massa facilisis fringilla. Nulla lacinia feugiat massa in varius. Praesent hendrerit leo eu elit molestie, id tincidunt justo finibus. Aenean maximus consectetur est vel ullamcorper.
            
Curabitur nec suscipit purus, in lacinia leo. Nunc quis purus et odio posuere pellentesque sit amet sed nunc. Mauris in nunc lacinia, ornare ipsum id, egestas mauris. Mauris iaculis gravida diam, at interdum nisi iaculis egestas.