Accordion

Open fullscreen

<dl class="c-accordion">
  <div class="c-accordion__item ">
    <dt class="c-accordion__title">Do I need to prepare the workspace prior to installation?</dt>
    <dd class="c-accordion__content o-prose u-flow--prose">All instruments need a power source, and some have additional requirements such as a water supply or waste extraction. Where this the case, we will advise you prior to shipping your instrument.</dd>
  </div>
  <div class="c-accordion__item ">
    <dt class="c-accordion__title">What specialist skills or knowledge are required?</dt>
    <dd class="c-accordion__content o-prose u-flow--prose">You don't need any specialist skills or knowledge to perform a Smart Install. Simply follow the instructions provided.</dd>
  </div>
  <div class="c-accordion__item ">
    <dt class="c-accordion__title">Do I need specialist tools or equipment to Smart Install a new instrument?</dt>
    <dd class="c-accordion__content o-prose u-flow--prose"><ul><li>For installation of a Mastersizer or Zetasizer system, you will need a computer with internet access in order to view the installation guides. For installation of an Epsilon 1 XRF instrument, you will also need a smartphone or tablet to connect with our support personnel via a secure, augmented reality (AR) platform.</li><li>Everything else you need to install your new instrument will be provided.</li></ul></dd>
  </div>
  <div class="c-accordion__item ">
    <dt class="c-accordion__title">What languages are available for the Smart Install guides?</dt>
    <dd class="c-accordion__content o-prose u-flow--prose"><ul><li>Mastersizer: English, Chinese, Korean, French, German and Japanese</li><li>Zetasizer: English, Chinese, Korean, French, German and Japanese</li><li>Epsilon 1: English, French, German and Japanese, Spanish and Portuguese</li></ul></dd>
  </div>
</dl>

{
  "items": [
    {
      "title": "Do I need to prepare the workspace prior to installation?",
      "content": "All instruments need a power source, and some have additional requirements such as a water supply or waste extraction. Where this the case, we will advise you prior to shipping your instrument."
    },
    {
      "title": "What specialist skills or knowledge are required?",
      "content": "You don't need any specialist skills or knowledge to perform a Smart Install. Simply follow the instructions provided."
    },
    {
      "title": "Do I need specialist tools or equipment to Smart Install a new instrument?",
      "content": "<ul><li>For installation of a Mastersizer or Zetasizer system, you will need a computer with internet access in order to view the installation guides. For installation of an Epsilon 1 XRF instrument, you will also need a smartphone or tablet to connect with our support personnel via a secure, augmented reality (AR) platform.</li><li>Everything else you need to install your new instrument will be provided.</li></ul>"
    },
    {
      "title": "What languages are available for the Smart Install guides?",
      "content": "<ul><li>Mastersizer: English, Chinese, Korean, French, German and Japanese</li><li>Zetasizer: English, Chinese, Korean, French, German and Japanese</li><li>Epsilon 1: English, French, German and Japanese, Spanish and Portuguese</li></ul>"
    }
  ]
}

To make an item display in its opened state when the page loads, add the class c-accordion--item__open
The classnames o-prose and u-flow--prose on the content are optional

Blank HTML template

<dl class="c-accordion">
    <div class="c-accordion__item">
        <dt class="c-accordion__title">Title one</dt>
        <dd class="c-accordion__content o-prose u-flow--prose">Content one</dd>
    </div>
    <div class="c-accordion__item">
        <dt class="c-accordion__title">Title two</dt>
        <dd class="c-accordion__content o-prose u-flow--prose">Content two</dd>
    </div>
</dl>

Accordion