A box that expands and contracts on tap.
An expandable box that opens and closes by clicking or tapping the top area.
When opening it automatically moves to the (vertical) center of the screen if it would otherwise would open fully or partially outside of the viewable area of the screen.
It can optionally take the ID of a DOM element to take into account when calculating the available vertical area (available height will be screen height minus the element's height).
Box title
1import ExpandableSection from '@tempoplatform/tpds/components/expandable-section'
2import { P } from '../../tpds/elements/typography'
3
4<ExpandableSection
5 title='Box title'
6 children={
7 <div>
8 <P>Cras mattis consectetur purus sit amet fermentum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor.</P>
9 <br />
10 <P>Cras mattis consectetur purus sit amet fermentum. Nullam quis risus eget urna mollis ornare vel eu leo. Aenean lacinia bibendum nulla sed consectetur. Aenean lacinia bibendum nulla sed consectetur.</P>
11 </div>
12 }
13/>Prop Name
Type
Default
Required
Description
title
String
' '
true
The title of the box
children
String | JSX
null
true
Content to display inside the box. Can be a string or JSX.
shouldClose
Boolean
null
optional
Pass 'true' to close the box externally.
excludeElementId
String
null
optional
ID of a DOM element to take it's height into account when calculating if the box will be fully visible after opening.
removeBorderTop
Boolean
false
optional
Pass 'true' to remove the top border of the box.
addBorderBottomIfOpen
Boolean
false
optional
Pass 'true' to add a border at the bottom when open.