# Details

The details component is an expandable section for supporting information that is not needed by most users.

## Demo

{% demo 'Details', 'detailsDemo', demos.detailsDemo, component.brand %}

## When to use this component
Use the details component to let users reveal a piece of supporting information when they need it.

## When not to use this component
Do not use the details component to hide information that the majority of your users need.

If you need to create a set of expandable content sections, do not use several details components. Use the accordion component instead.


## How it works
The details component uses `<details>` and `<summary>` HTML elements.

### Installation

To install the components, [go to the get started guide for developers](https://github.com/springernature/elements#readme).

To use the Details component, enter the following command in your Terminal:

```bash
npm install @springernature/elements
```

Then, import the style of the Details component into your `scss` file:

```scss
@import '../node_modules/@springernature/elements/eds-c-details';
```

### Configuration

To view all the configurations for this component, [go to the schema](https://github.com/springernature/elements/blob/main/components/eds-c-details/data/eds-c-details.schema.json).

#### Open

You can make a details component open on page load by applying `open: true` to the data used to compile its template. This adds the `open` attribute to its `details` element.

#### Heading level

You should add heading semantics to the details component by including the `headingLevel` property. Add a number of type `string` to for the heading level you want. 

For example, with `headingLevel: ‘2’`, the markup for the title becomes:

```html
<div class="c-details__header" role="heading" aria-level="2">
    ...
</div>
```
