Accordion:

Accordion is widely used on the websites to manage the large amount of content and lists.

Accordion Example:

Output:

Code:

<div class="darkout-section">
{% include do-accordion.html tag="modules" id="one" %}
</div>

How to add content:

• Step1: Navigate to the data file for accordion in _data > do-accordion.yml
• Step2: Add content to the data file as shown in the below example.

- accordion-title: strategy  # Use accordion header name here
  accordion-content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # Use accordion content here
  tags: modules  # Use accordion tag name here

• Step3: In the data file tags is a mandatory value. Without using tags accordion will not be displayed.

How to add in page:

• Step1: Add accordion to the page using the include statement.

• Step2: On the page use

  <div class="darkout-section">{% include do-accordion.html tag="modules" id="one" %}</div>

• Attributes:
  • Tag:
    • Tag is a mandatory attribute without using tag accordion will not be displayed. (Mandatory)
  • Id:
    • Id is also a mandatory attribute without using id accordion will not be displayed. Id is used for the purpose of including multiple accordion on same page. (Mandatory)
  • Class:
    • Use additional class here as include variable.

Accordion with Toggle all option:

Output:

Code:

<div class="darkout-section">
{% include do-accordion.html tag="modules" id="two" toggle-all="true" %}
</div>

How to add content:

• Step1: Navigate to the data file for accordion in _data > do-accordion.yml
• Step2: Add content to the data file as shown in the below example.

- accordion-title: strategy  # Use accordion header name here
  accordion-content: Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.  # Use accordion content here
  tags: modules  # Use accordion tag name here

• Step3: In the data file tags is a mandatory value. Without using tags accordion will not be displayed.

How to add in page:

• Step1: Add accordion to the page using the include statement.

• Step2: On the page use

  <div class="darkout-section">{% include do-accordion.html tag="modules" id="two" toggle-all="true" %}</div>

• Attributes:
  • Tag:
    • Tag is a mandatory attribute without using tag accordion will not be displayed. (Mandatory)
  • Id:
    • Id is also a mandatory attribute without using id accordion will not be displayed. Id is used for the purpose of including multiple accordion on same page. Without using id accordion will not function properly. (Mandatory)
  • Toggle-all:
    • Set this option to true so that accordion will have a ‘Toggle-open all’ button at the top.
    • Set this false so that accordion will not have toggle-all button at the top.
    • To use this option set a unique Id for each accordion.
  • Class:
    • Use additional class here as include variable.