Search/

Expandable section

Last modified:

An interactive content container that shows a short preview of the content and hides vertically overflowing content that can be expanded by toggling a button.

Example of Expandable section - default

<BcExpandable
  height={100}
  expandLabel='Show more'
  collapseLabel='Show less'
  containerId='expandable-example'
  wrapperClass='bc-markdown bc-markdown--bordered'
>
  <p>One of our main goals for the Bugcrowd platform is to provide Researchers with engagements and programs that are relevant to them. Utilizing data on a Researcher’s skills, their interests, experiences with Bugcrowd or security in general, alongside their past activity on the platform, allows our CrowdMatch recommendation engine to provide better-tuned opportunity suggestions. Resumes provide a new source of information about Researchers that gives the platform more ways to better match Researchers with ongoing and upcoming engagements. Better program matching leads to more success!</p>
  <p>Bug bounty programs provide opportunities for you to find and responsibly disclose vulnerabilities to companies. In return, companies reward you for your contributions to acknowledge your efforts. Over time, you can build up your reputation as a highly qualified and reliable security researcher while earning cash, swag.</p>
  <p>Anyone can sign up to be a researcher. To become a researcher, you just need to create an account.</p>
  <p> Researchers can participate in any public bounty program that we run. However, some private programs may require that you go through identity verification before you can participate.</p>
  <p>Yay! You can see me 👍(◕‿◕)👍</p>
</BcExpandable>

React documentation

Last modified:

BcExpandable props

BcExpandable is parent wrapper component for the expandable section, it accepts following props.

PropTypeRequired?DefaultDescription
heightnumberfalse200To set the maximum height in px of the component before content truncates.
expandLabelstringfalseShow moreTo set the expand action button text.
collapseLabelstringfalseShow lessTo set the collapse action button text.
wrapperClassstringfalseTo set a custom class to the parent container.
containerIdstringtrueA unique identifier for the container, used to semantically associate the button to the content.
childrenReactNode or stringfalseThe markup/content body of the expandable section.
buttonContainerStylesCSSPropertiesfalseTo set the custom inline CSS to the button container.

Any extended types: React.HTMLAttributes<HTMLDivElement>

HTML

Last modified:

Add .bc-expandable-section to an element.

Design

Last modified:

ℹ️ Do not hide content that requires user input. These UI patterns should always be immediately visible to the user.

Accessibility

Last modified:

It is use to provide a short preview of content where the full content is important but not vital to be displayed initially.

Rationale

Last modified:

See also

Last modified: