{"id":6996,"date":"2019-09-30T16:14:01","date_gmt":"2019-09-30T20:14:01","guid":{"rendered":"https:\/\/www.med.unc.edu\/webguide\/?page_id=6996"},"modified":"2025-11-18T09:39:06","modified_gmt":"2025-11-18T14:39:06","slug":"accordions","status":"publish","type":"page","link":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/","title":{"rendered":"Accordions"},"content":{"rendered":"<p>Accordions can be used to toggle the visibility of content. Here is a simple example of what accordions look like:<\/p>\n<div role=\"tablist\" class=\"panel-group yourcustomclass oscitas-bootstrap-container\" id=\"unc-accordion-0\">\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-0\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h4 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-0\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-0\"  \n                aria-expanded=\"true\" \n                href=\"#details-0-0\">\n                Accordion Number 1            <\/button>\n\n        <\/h4>\n\n    <\/div>\n\n    <div id=\"details-0-0\" class=\"panel-collapse collapse in oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">Toggle 1 Content Goes Here.<\/div>\n\n    <\/div>\n        \n<\/div>\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-1\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h4 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-1\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-1\"  \n                aria-expanded=\"false\" \n                href=\"#details-0-1\">\n                Accordion Number 2            <\/button>\n\n        <\/h4>\n\n    <\/div>\n\n    <div id=\"details-0-1\" class=\"panel-collapse collapse  oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">Toggle 2 Content Goes Here.<\/div>\n\n    <\/div>\n        \n<\/div>\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-2\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h4 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-2\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-2\"  \n                aria-expanded=\"false\" \n                href=\"#details-0-2\">\n                Accordion Number 3            <\/button>\n\n        <\/h4>\n\n    <\/div>\n\n    <div id=\"details-0-2\" class=\"panel-collapse collapse  oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">Toggle 3 Content Goes Here.<\/div>\n\n    <\/div>\n        \n<\/div>\n\n<div class=\"panel panel-default oscitas-bootstrap-container\">\n\n    <div id=\"panel-heading-details-0-3\" class=\"panel-heading oscitas-bootstrap-container\" role=\"tab\">\n\n        <h4 class=\"panel-title oscitas-bootstrap-container\">\n\n            <button class=\"accordion-toggle oscitas-bootstrap-container collapsed\" \n                id = \"button-details-0-3\"\n                data-toggle=\"collapse\"\n                data-parent=\"#unc-accordion-0\"    \n                aria-controls=\"#details-0-3\"  \n                aria-expanded=\"false\" \n                href=\"#details-0-3\">\n                Accordion Number 4            <\/button>\n\n        <\/h4>\n\n    <\/div>\n\n    <div id=\"details-0-3\" class=\"panel-collapse collapse  oscitas-bootstrap-container\">\n\n        <div class=\"panel-body oscitas-bootstrap-container\">Toggle 4 Content Goes Here.<\/div>\n\n    <\/div>\n        \n<\/div>\n<\/div>\n<p>&nbsp;<\/p>\n<h2>Issues With Accordions<\/h2>\n<p>While accordions can help organize content and save space, there are some important considerations to keep in mind:<\/p>\n<ol>\n<li><strong>Usability Concerns<\/strong>\n<ul>\n<li>Some visitors may not realize that they need to click on the accordion toggles to view the hidden content.<\/li>\n<li>Users typically prefer to find information quickly and with minimal effort. Since accordions hide content, users may have to click through multiple toggles to locate the information they need.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Printing Limitations<\/strong>\n<ul>\n<li>When printing a webpage, <strong>only the content within open toggles will be printed<\/strong>.<\/li>\n<li>If a visitor needs to print all the information inside an accordion, they must manually open each toggle and print the page multiple times\u2014one for each toggle\u2019s content.<\/li>\n<\/ul>\n<\/li>\n<li><strong>Searchability<\/strong> Issues\n<ul>\n<li>If a visitor searches for a keyword on your webpage (e.g., using <strong>CTRL + F<\/strong> on Windows or <strong>Command + F<\/strong> on Mac), <strong>only the content within open toggles will be searchable<\/strong>.<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>How to Add Accordions<\/h2>\n<ol>\n<li>Place your cursor where you want the accordion to display on the page.<\/li>\n<li>Select <strong>Accordion<\/strong> from the <strong>Content Elements<\/strong><strong>\u00a0dropdown menu<\/strong> under <strong>Interactive<\/strong>.<img loading=\"lazy\" decoding=\"async\" class=\"imageBorder list-image alignnone wp-image-13812 \" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor-300x178.png\" alt=\"Where to find Accordion button in the editor\" width=\"343\" height=\"203\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor-300x178.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor-560x333.png 560w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor.png 592w\" sizes=\"auto, (max-width: 343px) 100vw, 343px\" \/>\n<ul>\n<li><strong>Tip<\/strong>: If you don&#8217;t see the Content Elements Plugin button, (as shown in the example above), click the <strong>Toolbar Toggle<\/strong> button. The Toolbar Toggle button shows and hides a collection of buttons in the editor.<img loading=\"lazy\" decoding=\"async\" class=\"imageBorder list-image alignnone wp-image-7794\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2019\/09\/Screen-Shot-2019-09-30-at-2.59.26-PM.png\" alt=\"Toolbar Toggle button\" width=\"300\" height=\"285\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2019\/09\/Screen-Shot-2019-09-30-at-2.59.26-PM.png 394w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2019\/09\/Screen-Shot-2019-09-30-at-2.59.26-PM-300x285.png 300w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/li>\n<\/ul>\n<\/li>\n<li>After selecting <strong>Accordion<\/strong> from the <strong>Content Elements<\/strong><strong>\u00a0dropdown menu<\/strong>, a pop-up box will appear with the accordion settings.<br \/>\n<a href=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/02\/accordion-settings.png\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-14029\" src=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/02\/accordion-settings.png\" alt=\"Screenshot of the accordion settings.\" width=\"500\" height=\"254\" srcset=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/02\/accordion-settings.png 996w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/02\/accordion-settings-300x152.png 300w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/02\/accordion-settings-768x390.png 768w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/02\/accordion-settings-600x305.png 600w, https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2025\/02\/accordion-settings-560x284.png 560w\" sizes=\"auto, (max-width: 500px) 100vw, 500px\" \/><\/a><\/li>\n<li>Configure the Accordion Settings:\n<ol>\n<li><strong>Custom Class<\/strong> &#8211; Apply alternate accordion styles by adding the corresponding class name in this field. Refer to the <strong><a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/alternate-accordion-styles\">Alternate Accordion Styles<\/a><\/strong> page for available designs and their class names.<\/li>\n<li><strong>Color Settings<\/strong> \u2013 Keep the default values for <strong>Button Color<\/strong>, <strong>Button Hover Color<\/strong>, <strong>Text Color<\/strong>, and <strong>Text Hover Color<\/strong>.<\/li>\n<li><strong>Heading Level<\/strong> \u2013 Choose the appropriate heading level for the accordion section titles. This is explained in detail below.<\/li>\n<li><strong>Number of Sections<\/strong> &#8211; Specify how many toggles (accordion panels) should be created.<\/li>\n<\/ol>\n<\/li>\n<li>Shortcode will be added to the page that creates an accordion. The shortcode will look like this:<code>[toggles class=\"yourcustomclass\"]\n[toggle title=\"Accordion Number 1\" class=\"in\"]Toggle 1 Content Goes Here.[\/toggle]\n[toggle title=\"Accordion Number 2\"]Toggle 2 Content Goes Here.[\/toggle]\n[toggle title=\"Accordion Number 3\"]Toggle 3 Content Goes Here.[\/toggle]\n[toggle title=\"Accordion Number 4\"]Toggle 4 Content Goes Here.[\/toggle]\n[\/toggles]<\/code><\/li>\n<li>The first toggle includes <strong>class=&#8221;in&#8221;<\/strong> in the shortcode. This keeps the first toggle open when the page loads. If you want all toggles to be closed by default, delete class=&#8221;in&#8221;.<\/li>\n<li>Each toggle has placeholder text that needs to be replaced with your own content.\n<ol>\n<li>Add a title to each toggle by replacing <strong>Accordion Number #<\/strong> in the shortcode. Don&#8217;t remove the quotes. Simply edit the content within the quotes.<code>[toggle title=\"<strong>Accordion Number 2<\/strong>\"]Toggle 2 Content Goes Here.[\/toggle]<\/code><\/li>\n<li>Add content to each toggle by replacing <strong>Toggle # Content Goes Here<\/strong>. You can include text, images, links, headers, and more. <code>[toggle title=\"Accordion Number 2\"]<strong>Toggle 2 Content Goes Here.<\/strong>[\/toggle]<\/code><\/li>\n<\/ol>\n<\/li>\n<li>After the shortcode has been generated, you can add or remove toggles as needed. Simply add or delete whole toggle sections.<code>[toggle title=\"Accordion Number 2\"]Toggle 2 Content Goes Here.[\/toggle]<\/code><\/li>\n<\/ol>\n<hr  style=\"margin:50px 0\"class=\" rule-thin osc-rule\" \/>\n<h2>Choosing the Right Heading Level<\/h2>\n<p>When setting the <strong>Header Type<\/strong> for your accordion, it\u2019s essential to choose the appropriate heading level to maintain proper document structure and ensure accessibility.<\/p>\n<p>Headings provide structure to a webpage, helping users (including those using screen readers) navigate content more efficiently. <strong>Skipping heading levels or using them out of order can create confusion<\/strong> and make it difficult for assistive technologies to interpret the content correctly. As an added bonus, proper heading structure improves search engine optimization (SEO).<\/p>\n<h3>The Importance of Headers<\/h3>\n<p>Here\u2019s a quick recap of why headings matter and best practices for using them effectively. More details can be found in our\u00a0<strong><a href=\"https:\/\/www.med.unc.edu\/webguide\/accessibility\/headings\/\">accessibility documentation on headers<\/a><\/strong>.<\/p>\n<ul>\n<li><strong>Use headings for structure, not styling<\/strong>. Headings are used to separate content on a web page into meaningful sections. They give structure to a page and simplify page readability.<\/li>\n<li><strong>Use Unique and Descriptive Headings.<\/strong> Ensure that headings are descriptive and relate to the content they introduce.<\/li>\n<li><strong>Headings must follow a logical order<\/strong> to be compliant with web accessibility requirements. There are six different levels of headings: <strong>H1<\/strong>, <strong>H2<\/strong>, <strong>H3<\/strong>, <strong>H4<\/strong>, <strong>H5<\/strong>, <strong>H6<\/strong>. A Heading 1, or H1, is the largest and most important heading. An H6 is the smallest and least important heading.<\/li>\n<li>In the School of Medicine web system, <strong>page titles are automatically styled as an H1<\/strong>. This means that the first heading used in the main content should be an <strong>H2<\/strong>, followed by <strong>H3<\/strong>, <strong>H4<\/strong>, etc., in descending order.<\/li>\n<li><strong>Do not skip heading levels<\/strong>. Headings should be used in descending order. For example, the first header used in the main content area should be an H2. If you wish to follow the H2 with a subheading, use an H3. If you wish to follow the H3 with a subheading, use an H4 and so on.<\/li>\n<\/ul>\n<h3>What Heading Level Should I Choose For An Accordion?<\/h3>\n<p>The heading level for each accordion toggle title should be determined based on the closest preceding heading on the page.<\/p>\n<ul>\n<li>If no heading precedes the accordion in the body content \u2192 Set the <strong>Heading Level<\/strong> to H2 (since the page title is an H1).<\/li>\n<li>If the accordion follows an existing heading \u2192 Set the <strong>Heading Level<\/strong> to the next appropriate level in the sequence.\n<ul>\n<li>Example: If the accordion follows an H2, set it to H3.<\/li>\n<li>If it follows an H3, set it to H4, and so on.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>By selecting the correct heading level, you ensure a logical content structure that improves readability, accessibility, and SEO.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accordions can be used to toggle the visibility of content. Here is a simple example of what accordions look like: &nbsp; Issues With Accordions While accordions can help organize content and save space, there are some important considerations to keep in mind: Usability Concerns Some visitors may not realize that they need to click on &hellip; <a href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/\" aria-label=\"Read more about Accordions\">Read more<\/a><\/p>\n","protected":false},"author":3206,"featured_media":0,"parent":2212,"menu_order":15,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"layout":"","cellInformation":"","apiCallInformation":"","footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-6996","page","type-page","status-publish","hentry","odd"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Accordions - Web Guide<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accordions - Web Guide\" \/>\n<meta property=\"og:description\" content=\"Accordions can be used to toggle the visibility of content. Here is a simple example of what accordions look like: &nbsp; Issues With Accordions While accordions can help organize content and save space, there are some important considerations to keep in mind: Usability Concerns Some visitors may not realize that they need to click on &hellip; Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Guide\" \/>\n<meta property=\"article:modified_time\" content=\"2025-11-18T14:39:06+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-73.png\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/\",\"name\":\"Accordions - Web Guide\",\"isPartOf\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor-300x178.png\",\"datePublished\":\"2019-09-30T20:14:01+00:00\",\"dateModified\":\"2025-11-18T14:39:06+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#primaryimage\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor.png\",\"contentUrl\":\"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor.png\",\"width\":592,\"height\":352,\"caption\":\"Where to find Accordion button in the editor\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"User Guide\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/ughome\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Styling Content\",\"item\":\"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Accordions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.med.unc.edu\/webguide\/#website\",\"url\":\"https:\/\/www.med.unc.edu\/webguide\/\",\"name\":\"Web Guide\",\"description\":\"School of Medicine IT\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accordions - Web Guide","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/","og_locale":"en_US","og_type":"article","og_title":"Accordions - Web Guide","og_description":"Accordions can be used to toggle the visibility of content. Here is a simple example of what accordions look like: &nbsp; Issues With Accordions While accordions can help organize content and save space, there are some important considerations to keep in mind: Usability Concerns Some visitors may not realize that they need to click on &hellip; Read more","og_url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/","og_site_name":"Web Guide","article_modified_time":"2025-11-18T14:39:06+00:00","og_image":[{"url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2021\/10\/Screenshot-73.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/","url":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/","name":"Accordions - Web Guide","isPartOf":{"@id":"https:\/\/www.med.unc.edu\/webguide\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#primaryimage"},"image":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor-300x178.png","datePublished":"2019-09-30T20:14:01+00:00","dateModified":"2025-11-18T14:39:06+00:00","breadcrumb":{"@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#primaryimage","url":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor.png","contentUrl":"https:\/\/www.med.unc.edu\/webguide\/wp-content\/uploads\/sites\/419\/2024\/10\/Accordion-Button-in-Editor.png","width":592,"height":352,"caption":"Where to find Accordion button in the editor"},{"@type":"BreadcrumbList","@id":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/accordions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.med.unc.edu\/webguide\/"},{"@type":"ListItem","position":2,"name":"User Guide","item":"https:\/\/www.med.unc.edu\/webguide\/userguide\/ughome\/"},{"@type":"ListItem","position":3,"name":"Styling Content","item":"https:\/\/www.med.unc.edu\/webguide\/userguide\/styling-content\/"},{"@type":"ListItem","position":4,"name":"Accordions"}]},{"@type":"WebSite","@id":"https:\/\/www.med.unc.edu\/webguide\/#website","url":"https:\/\/www.med.unc.edu\/webguide\/","name":"Web Guide","description":"School of Medicine IT","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.med.unc.edu\/webguide\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links_to":[],"_links_to_target":[],"_links":{"self":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/6996","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/users\/3206"}],"replies":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/comments?post=6996"}],"version-history":[{"count":1,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/6996\/revisions"}],"predecessor-version":[{"id":15134,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/6996\/revisions\/15134"}],"up":[{"embeddable":true,"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/pages\/2212"}],"wp:attachment":[{"href":"https:\/\/www.med.unc.edu\/webguide\/wp-json\/wp\/v2\/media?parent=6996"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}