{
  "accordion": {
    "title": "Accordion",
    "status": {
      "deprecated": "v3.0"
    },
    "introduction": [
      "<p>The accordion applies JavaScript interactions to expand and collapse elements on the page both in isolation and in relation to other accordion sections. It is configurable, so can be applied to different types of elements.</p>",
      "<p>Please refer to the <strong class='text-bold'>PF-Accordion</strong> component for a more up-to-date implementation.</p>"
    ],
    "examples": [
      {
        "description": "Unstyled accordion",
        "template": "accordion",
        "template-data": {
          "accordion-start": "first-open",
          "accordion-type": "open-single",
          "accordion__segment": [
            {
              "name": "Segment 1",
              "accordion__toggle": {
                "name": "Toggle 1"
              },
              "accordion__content": {
                "content": "Content 1"
              }
            },
            {
              "name": "Segment 2",
              "accordion__toggle": {
                "name": "Toggle 2"
              },
              "accordion__content": {
                "content": "Content 2"
              }
            }
          ]
        }
      },
      {
        "description": "Chrome accordion",
        "template": "accordion",
        "template-data": {
          "accordion-start": "all-closed",
          "accordion-type": "open-single",
          "modifiers": [
            "--chrome"
          ],
          "accordion__segment": [
            {
              "name": "Segment 1",
              "modifiers": [
                "--chrome"
              ],
              "accordion__toggle": {
                "name": "Toggle 1",
                "modifiers": [
                  "--chrome"
                ]
              },
              "accordion__content": {
                "content": "Content 1",
                "modifiers": [
                  "--chrome"
                ]
              }
            },
            {
              "name": "Segment 2",
              "modifiers": [
                "--chrome"
              ],
              "accordion__toggle": {
                "name": "Toggle 2",
                "modifiers": [
                  "--chrome"
                ]
              },
              "accordion__content": {
                "content": "Content 2",
                "modifiers": [
                  "--chrome"
                ]
              }
            }
          ]
        }
      },
      {
        "description": "Chrome and highlighted accordion",
        "template": "accordion",
        "template-data": {
          "accordion-start": "all-closed",
          "accordion-type": "open-single",
          "modifiers": [
            "--chrome",
            "--highlight"
          ],
          "accordion__segment": [
            {
              "name": "Segment 1",
              "modifiers": [
                "--chrome",
                "--highlight"
              ],
              "accordion__toggle": {
                "name": "<span class=\"heading heading--4 heeading-cta\">Business development <span class=\"link heading__cta text-small-medium\">3 openings</span></span>",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              },
              "accordion__content": {
                "content": "Content 1",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              }
            },
            {
              "name": "Segment 2",
              "modifiers": [
                "--chrome",
                "--highlight"
              ],
              "accordion__toggle": {
                "name": "<span class=\"heading heading--4 heeading-cta\">Business development <span class=\"link heading__cta text-small-medium\">3 openings</span></span>",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              },
              "accordion__content": {
                "content": "Content 2",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              }
            },
            {
              "name": "Segment 3",
              "modifiers": [
                "--chrome",
                "--highlight"
              ],
              "accordion__toggle": {
                "name": "<span class=\"heading heading--4 heeading-cta\">Business development <span class=\"link heading__cta text-small-medium\">3 openings</span></span>",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              },
              "accordion__content": {
                "content": "Content 3",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              }
            },
            {
              "name": "Segment 4",
              "modifiers": [
                "--chrome",
                "--highlight"
              ],
              "accordion__toggle": {
                "name": "<span class=\"heading heading--4 heeading-cta\">Business development <span class=\"link heading__cta text-small-medium\">3 openings</span></span>",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              },
              "accordion__content": {
                "content": "Content 4",
                "modifiers": [
                  "--chrome",
                  "--highlight"
                ]
              }
            }
          ]
        }
      }
    ],
    "usages": {
      "body": [
        [
          "<code>.accordion</code>",
          "Placed on outer-most tag that will contain the accordion.",
          "Required"
        ],
        [
          "<code>.accordion__segment</code>",
          "Placed on all segments of the accordion that wrap a segment toggle and its expanding or collapsing content.",
          "Optional, as the JavaScript will add relevant classes if correct data attributes are defined. See below."
        ],
        [
          "<code>.accordion__toggle</code>",
          "Placed on the element inside an accordion segment that will expand and collapse the content of that segment when clicked on.",
          "Optional, as the JavaScript will add relevant classes if correct data attributes are defined. See below."
        ],
        [
          "<code>.accordion__content</code>",
          "Placed on the element inside the accordion segment which must expand and collapse.",
          "Optional, as the JavaScript will add relevant classes if correct data attributes are defined. See below."
        ],
        [
          "<code>.accordion--chrome</code> and <code>accordion__segment|toggle|content--chrome</code>",
          "Adds some basic aesthetic styling",
          "Optional"
        ],
        [
          "<code>.accordion--highlighted</code> and <code>accordion__segment|toggle|content--highlighted</code>",
          "Adds slightly more prominent aesthetic styling",
          "Optional"
        ],
        [
          "<code>[data-js=accordion-segment]</code>",
          "Placed on all segments of the accordion that wrap a segment toggle and its expanding or collapsing content.",
          "Required, unless the <code>$.pfAccordion.segment</code> property is assigned to another identifier before running <code>$.pfAccordion.init()</code>."
        ],
        [
          "<code>[data-js=accordion-toggle]</code>",
          "Placed on the element inside an accordion segment that will expand and collapse the content of that segment when clicked on.",
          "Required, unless the <code>$.pfAccordion.toggle</code> property is assigned to another identifier before running <code>$.pfAccordion.init()</code>."
        ],
        [
          "<code>[data-js=accordion-content]</code>",
          "Placed on the element inside the accordion segment which must expand and collapse.",
          "Required, unless the <code>$.pfAccordion.content</code> property is assigned to another identifier before running <code>$.pfAccordion.init()</code>."
        ]
      ]
    },
    "dependencies": [
      "src/html/components/accordion.hbs",
      "src/styles/components/blocks/_accordion.scss",
      "src/scripts/modules/jquery.pfAccordion.js"
    ]
  }
}