Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?

Latest commit


Git stats


Failed to load latest commit information.
Latest commit message
Commit time

Full page (or set height) fancy React accordion

After doing Javascript 30 by Wes Bos, I decided to make his accordion (from lesson 5) a React component, with some tweaks! Enjoy.

Your React application will need to handle importing .css files (e.g. css-loader if using webpack), if you care to use the provided/default CSS.

You will need to set any parent elemnts height to 100% or 100vh, and not pass a height prop, if you wish to have a fullpage accordion.

CodeSandbox Demo



npm -i react-fullpage-accordion


yarn add react-fullpage-accordion


Optional/Recommended: import provided/default CSS

import "react-fullpage-accordion/dist/react-fullpage-accordion.css"

In Gatsby `gatsby-browser.js

import "react-fullpage-accordion/dist/react-fullpage-accordion.css"


import React from 'react'
import { FullpageAccordion, Panel } from 'react-fullpage-accordion';

<FullpageAccordion height="500px">
    <Panel itemId="0" background={''}>
            <a href="/duckPage">
        <p>a try!</p>
    <Panel itemId="1" background={''}>
            <a href="/oberynPage">
        <p>a try!</p>

Props for FullpageAccordion Component:

prop type default description example required
height string 100% of parent Height of the panel container '500px'

Props for Panel Component:

prop type default description example required
itemId string n/a Id for the Panel '1', 'item-1' X
background string n/a Image source ''


A Panel works best with three (3) children. We transition the first and last children into the panel on click, out again on the second click, or on another panel being clicked. Three children is recommended, but it is not a requirement. You can also override or provide your own CSS for the children, this is just the default behavior.

Class names

The following are the provided class names if you want to write your own CSS.

class description
panels Panel container
panel Indivitual panel
panel open open-active The active panel

To transition the children our CSS uses the following:

.panel > *:first-child {
  transform: translateY(-100%);
} > *:first-child {
  transform: translateY(0);

.panel > *:last-child {
  transform: translateY(100%);
} > *:last-child {
  transform: translateY(0);