module.exports = { id: 'spoilers-and-accordions', title: 'Spoilers & accordions', keywords: [`spoiler`, `collapse`, `accordion`, `contextual`, `vertical tabs`], description: `

mini.css provides you with accessible spoilers and accordions. They are composed of two components - the wrapper, the toggle button and the content container:

To create a collapsible spoiler, simply create a <div>, applying the appropriate class to it (.collapse). This serves as the wrapper for the collapsible spoiler.
Inside the wrapper, create a checkbox or radio input, immediately followed by a <label> for the checkbox. The former serves as your collapsible spoiler's control, while the latter is the toggle button for your collapsible spoiler.
Create a <div> right after the <label>. This will serve as the container for the collapsible content.

If you want to create an accordion, simply repeat the last two steps above for each section of the accordion. In order to make collapsible spoilers and accordions fully accessible, it is highly recommended to add the aria-hidden="true" attribute to all labels and inputs that control the behavior of these components.

`, example: `

This is the first section of the collapse

This is the second section of the collapse

This is the first section of the accordion

This is the second section of the accordion

`, samples: [`

<div class="collapse">
  <input type="checkbox" id="collapse-section1" checked aria-hidden="true">
  <label for="collapse-section1" aria-hidden="true">Collapse section 1</label>
  <div>
    <p>This is the first section of the collapse</p>
  </div>
  <input type="checkbox" id="collapse-section2" aria-hidden="true">
  <label for="collapse-section2" aria-hidden="true">Collapse section 2</label>
  <div>
    <p>This is the second section of the collapse</p>
  </div>
</div>

`, `

<div class="collapse">
  <input type="radio" id="accordion-section1" checked aria-hidden="true" name="accordion">
  <label for="accordion-section1" aria-hidden="true">Accordion section 1</label>
  <div>
    <p>This is the first section of the accordion</p>
  </div>
  <input type="radio" id="accordion-section2" aria-hidden="true" name="accordion">
  <label for="accordion-section2" aria-hidden="true">Accordion section 2</label>
  <div>
    <p>This is the second section of the accordion</p>
  </div>
</div>

`], notes: [ `Make sure all the radio buttons in the same accordion have the same name.`, `If you want a collapsible spoiler or an accordion section to be expanded by default, you can add the checked attribute to the respective collapsible spooiler's or section's control.`, `The max-height of the content container is 400px.`, `Using the aria-hidden="true" attribute is highly recommended, as screen readers will ignore the controls of the collapsible spoiler or accordion and read all the contained content normally.` ], customization: [ `Background color, text color and background color on hover for the collapsible spoiler's labels can be changed by changing the values of --collapse-label-back-color, --collapse-label-fore-color and --collapse-label-hover-back-color respectively.`, `Border color for the collapsible spoiler can be changed by changing the value of the --collapse-border-color.`, `Background color for the collapsible spoiler's content can be changed by changing the value of the --collapse-content-back-color.`, `Background color and border for the spoiler's content selected labels can be changed by changing the values of the --collapse-selected-label-back-color and --collapse-selected-label-border-color respectively.`, `Universal margin for elements can be changed globally by changing the value of the --universal-margin variable. As a rule of thumb, consider the universal margin to be the distance you want your paragraphs to have from the sides of the screen.`, `Universal padding for elements can be changed globally by changing the value of the --universal-padding variable.`, `Universal border radius for elements can be changed globally by changing the value of the --universal-border-radius variable.` ], modifiers: [], dos: [], donts: [ { description: `You should not place anything between the checkbox controlling the collapsible spoiler and its label or between the label and the content container.`, sample: `

<div class="collapse">
  <input type="checkbox" id="collapse-section1" checked aria-hidden="true">
  <!-- Do not place other stuff between these -->
  <label for="collapse-section1" aria-hidden="true">Collapse section 1</label>
  <!-- Do not place other stuff between these -->
  <div>
    <p>This is the first section of the collapse</p>
  </div>
</div>

` } ] }