@ou-imdt/css/docs/native/details.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# details

A disclosure widget with an open and closed state.

A detail tag <strong>MUST</strong> contain a summary tag.

You cannot, at this time, animate opening and closing a native detail tags 😭.

To open and close the attribute 'open' can be added to the detail tag while removing it will close it (open="false" is not valid), having an optn attribite on render will make it render in the open state.

This tag supports normal events as well as the additional 'toggle' event.

Native detail tags do not have the same functionality as an expandable list, <mark>we'll need to create a component for that</mark>.

Class '.icon-end' will display the open and closing icon to the far right of the label.

Class '.compact' will display the disclosure in a more compact manner.

Be aware the details element differs in style from the brand 'accordion' style by having the icon display on the left by default, this is to keep inline with the default behaviour of the native element.

## Example

<div class="card">
  <details>
    <summary>
      <strong>Default</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="icon-end">
    <summary>
      <strong>Default icon end</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details style="--summary-icon-open:  	
        '\1F435'; --summary-icon-closed: 	
        '\1F648';">
    <summary>
      <strong>Custom Icon</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details>
    <summary style="--summary-icon-closed: '\f078'; --summary-icon-open: '\f077';
    --icon-font: 'Font Awesome 6 Free'">
      <strong>Font Awesome Icon</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="icon-end">
    <summary style="--summary-icon-closed: '\f078'; --summary-icon-open: '\f077';
    --icon-font: 'Font Awesome 6 Free'">
      <strong>Font Awesome Icon at End</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="compact">
    <summary>
      <strong>Compact</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="compact icon-end">
    <summary>
      <strong>Compact end icon</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <details>
    <summary>
      <strong>Default</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="icon-end">
    <summary>
      <strong>Default icon end</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details style="--summary-icon-open:  	
        '\1F435'; --summary-icon-closed: 	
        '\1F648';">
    <summary>
      <strong>Custom Icon</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details>
    <summary style="--summary-icon-closed: '\f078'; --summary-icon-open: '\f077';
    --icon-font: 'Font Awesome 6 Free'">
      <strong>Font Awesome Icon</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="icon-end">
    <summary style="--summary-icon-closed: '\f078'; --summary-icon-open: '\f077';
    --icon-font: 'Font Awesome 6 Free'">
      <strong>Font Awesome Icon at End</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="compact">
    <summary>
      <strong>Compact</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>

  <details class="compact icon-end">
    <summary>
      <strong>Compact end icon</strong>
    </summary>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Sed, veritatis est dolores reprehenderit
      cupiditate praesentium! Illum dolorum minus fuga quos, voluptatibus reprehenderit laborum quae
      voluptas beatae a? Nisi, iure nostrum.</p>
  </details>
```

</details>