{"id":929,"date":"2022-05-09T21:46:58","date_gmt":"2022-05-09T21:46:58","guid":{"rendered":"https:\/\/digitaldocumentation.wustl.edu\/web-design-system-documentation\/?page_id=67"},"modified":"2024-05-07T02:04:39","modified_gmt":"2024-05-07T02:04:39","slug":"accordion","status":"publish","type":"page","link":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/","title":{"rendered":"Accordion"},"content":{"rendered":"\n<p class=\"is-style-lead\">Accordions can be a handy tool to condense long pages. When clicked, the accordion header opens or closes to show or hide content.<\/p>\n\n\n\n<p>Accordions do have drawbacks, though. They require visitors to read a series of headings, then click a heading to view more information. The mental processing and additional steps slightly increase the page\u2019s&nbsp;<a href=\"https:\/\/www.nngroup.com\/articles\/interaction-cost-definition\/\">interaction cost<\/a>&nbsp;\u2014 that is, the effort visitors must exert to reach their goals.<\/p>\n\n\n\n<hr class=\"wp-block-separator has-alpha-channel-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">When to use accordions<\/h2>\n\n\n\n<ul>\n<li>For&nbsp;<em>distinct<\/em>&nbsp;sections of content from which visitors will pick and choose (e.g., policies, year-by-year curriculum descriptions, program-dependent instructions)<\/li>\n\n\n\n<li>To avoid creating child pages that are too deep to appear in the site menu (i.e., sub-sub-sub pages)<\/li>\n\n\n\n<li>To collapse supplementary information that could otherwise appear daunting<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">When&nbsp;<em>not<\/em>&nbsp;to use accordions<\/h2>\n\n\n\n<ul>\n<li>If most or all of the content should be accessible at once (e.g., to compare information in different sections)<\/li>\n\n\n\n<li>For sections that aren\u2019t very long (that click should be worthwhile!)<\/li>\n\n\n\n<li>If visitors will need to read all or most sections on the page<\/li>\n\n\n\n<li>On pages that should be printer-friendly<\/li>\n<\/ul>\n\n\n\n<hr class=\"wp-block-separator has-css-opacity\"\/>\n\n\n\n<h2 class=\"wp-block-heading\">How to add accordions<\/h2>\n\n\n\n<ol>\n<li>In the Page Editor, navigate to the area of the page where you want the block to display.<\/li>\n\n\n\n<li>Click on the Add block icon [+] and select\/search for <strong>Accordions<\/strong> from the menu.<\/li>\n\n\n\n<li>By default, the block starts with three individual accordions. <br>(If you don&#8217;t need three accordions, you can delete one by clicking on the three dots in the far right corner of the formatting bar and selecting &#8220;Remove accordion&#8221;.)<\/li>\n\n\n\n<li>Enter&nbsp;<strong>header text<\/strong>. Like other headings, aim to make accordion headers&nbsp;<a href=\"https:\/\/sites.wustl.edu\/items\/naming-pages-headings\/\">clear, concise and consistent<\/a>.<\/li>\n\n\n\n<li>Add content to the&nbsp;<strong>accordion body<\/strong>. You can insert multiple content blocks. Just avoid blocks that will make the accordion too crowded or busy (callouts, icons, etc.).<\/li>\n\n\n\n<li>Use the + icon (Add block) underneath the block you are working on to add more accordions as necessary.<\/li>\n\n\n\n<li>To\u00a0<strong>reorder accordions<\/strong>, click on the accordion header that you\u2019re moving, then use the block arrows on the left to move it up or down to its new location.<\/li>\n\n\n\n<li>Click update in the page editor to save your changes.<\/li>\n<\/ol>\n\n\n\n<div class=\"wp-block-washu-accordions accordion\">\n<dt class=\"accordion-header\" aria-expanded=\"\"><span class=\"accordion-header-content\">Accordion header #1<\/span><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"#a51417\" d=\"M5 6l5 5 5-5 2 1-7 7-7-7z\"><\/path><\/svg><\/dt><dd class=\"accordion-content \">\n<p>Accordion body <\/p>\n<\/dd>\n\n\n\n<dt class=\"accordion-header\" aria-expanded=\"\"><span class=\"accordion-header-content\">Accordion header #2<\/span><svg width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><path fill=\"#a51417\" d=\"M5 6l5 5 5-5 2 1-7 7-7-7z\"><\/path><\/svg><\/dt><dd class=\"accordion-content \">\n<p>Accordion body<\/p>\n<\/dd>\n<\/div>\n\n\n\n<h2 class=\"wp-block-heading\">How to link to a specific accordion and have it automatically open for a user<\/h2>\n\n\n\n<p>In some cases, you may want to direct users to a specific accordion on a page of FAQs or section where there are many accordions. You can do this, and have that specific accordion automatically open for the user when they click on the link as well.<\/p>\n\n\n\n<p>To do this, you simply add a hash to the page URL. The hash you add is based on the order and number of accordions, but the basic formula is to add&nbsp;<strong>#accordion-header-XX<\/strong>&nbsp;to the URL.<\/p>\n\n\n\n<p>As with other projects, the accordions are zero-based so the first one would be&nbsp;<strong>#accordion-header-0<\/strong>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Accordions can be a handy tool to condense long pages. When clicked, the accordion header opens or closes to show or hide content. Accordions do have drawbacks, though. They require visitors to read a series of headings, then click a heading to view more information. The mental processing and additional steps slightly increase the page\u2019s&nbsp;interaction [&hellip;]<\/p>\n","protected":false},"author":11,"featured_media":0,"parent":567,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v19.14 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Accordion - MarComm Website<\/title>\n<meta name=\"robots\" content=\"noindex, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accordion - MarComm Website\" \/>\n<meta property=\"og:description\" content=\"Accordions can be a handy tool to condense long pages. When clicked, the accordion header opens or closes to show or hide content. Accordions do have drawbacks, though. They require visitors to read a series of headings, then click a heading to view more information. The mental processing and additional steps slightly increase the page\u2019s&nbsp;interaction [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/\" \/>\n<meta property=\"og:site_name\" content=\"MarComm Website\" \/>\n<meta property=\"article:modified_time\" content=\"2024-05-07T02:04:39+00:00\" \/>\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=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/\",\"name\":\"Accordion - MarComm Website\",\"isPartOf\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website\"},\"datePublished\":\"2022-05-09T21:46:58+00:00\",\"dateModified\":\"2024-05-07T02:04:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Blocks\",\"item\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Accordion\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website\",\"url\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/\",\"name\":\"MarComm Website\",\"description\":\"Just another digitaldocumentation.wustl.edu Sites site\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accordion - MarComm Website","robots":{"index":"noindex","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"og_locale":"en_US","og_type":"article","og_title":"Accordion - MarComm Website","og_description":"Accordions can be a handy tool to condense long pages. When clicked, the accordion header opens or closes to show or hide content. Accordions do have drawbacks, though. They require visitors to read a series of headings, then click a heading to view more information. The mental processing and additional steps slightly increase the page\u2019s&nbsp;interaction [&hellip;]","og_url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/","og_site_name":"MarComm Website","article_modified_time":"2024-05-07T02:04:39+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/","url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/","name":"Accordion - MarComm Website","isPartOf":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website"},"datePublished":"2022-05-09T21:46:58+00:00","dateModified":"2024-05-07T02:04:39+00:00","breadcrumb":{"@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/accordion\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/"},{"@type":"ListItem","position":2,"name":"Blocks","item":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/blocks\/"},{"@type":"ListItem","position":3,"name":"Accordion"}]},{"@type":"WebSite","@id":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/#website","url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/","name":"MarComm Website","description":"Just another digitaldocumentation.wustl.edu Sites site","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"}]}},"distributor_meta":false,"distributor_terms":false,"distributor_media":false,"distributor_original_site_name":"MarComm Website","distributor_original_site_url":"https:\/\/digitaldocumentation.wustl.edu\/marcomm","push-errors":false,"_links":{"self":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/929"}],"collection":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/users\/11"}],"replies":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/comments?post=929"}],"version-history":[{"count":4,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/929\/revisions"}],"predecessor-version":[{"id":1109,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/929\/revisions\/1109"}],"up":[{"embeddable":true,"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/pages\/567"}],"wp:attachment":[{"href":"https:\/\/digitaldocumentation.wustl.edu\/marcomm\/wp-json\/wp\/v2\/media?parent=929"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}