{"id":23,"date":"2021-12-21T18:51:39","date_gmt":"2021-12-21T23:51:39","guid":{"rendered":"https:\/\/www.worcester.edu\/marketing-communications\/?page_id=23"},"modified":"2022-06-16T10:02:13","modified_gmt":"2022-06-16T14:02:13","slug":"accordions","status":"publish","type":"page","link":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/","title":{"rendered":"Accordions"},"content":{"rendered":"<h3><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-67 size-large\" src=\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-1024x414.png\" alt=\"\" width=\"1024\" height=\"414\" srcset=\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-1024x414.png 1024w, https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-300x121.png 300w, https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-768x311.png 768w, https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-1536x621.png 1536w, https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-2048x829.png 2048w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/h3>\n<h3>The Purpose of This Component<\/h3>\n<p>This component was designed to show top-level keywords or keyphrases to grab the page user&#8217;s attention. The accompanying content is hidden from view unless the user clicks on the accordion to open it up.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><em><strong>[GIF of Accordion opening and closing]<\/strong><\/em><\/p>\n<p>&nbsp;<\/p>\n<p>The purpose of the Accordion component is to display relevant content in a visual and meaningful way. This component also reduces the amount of scrolling on a page.<\/p>\n<p>The accordion component acts as a vertically stacked list, grouped by like-content, more thoroughly explained in the dropdown accordion.<\/p>\n<h3>How to Use the Accordion Component<\/h3>\n<p>To add an accordion component, select Accordions from the component list.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-62\" src=\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_adding_accordion.png\" alt=\"\" width=\"755\" height=\"407\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The content manager will then see the Accordion component appear. The section tab seen below will open by default. The content manager will then name the accordion component.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"wp-image-25\" src=\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_section_name.png\" alt=\"\" width=\"755\" height=\"337\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>The next tab to the right of the <strong>Section<\/strong> tab is the <strong>General <\/strong>tab, where the content manager can specify a heading or description text for this component if they choose.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-26 size-full\" src=\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_general_tab-e1640641001572.png\" alt=\"\" width=\"741\" height=\"365\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>This tab does not have any required fields, meaning that the content manager can leave it blank if they choose or if it makes sense in terms of content. The content manager will select whether or not multiple accordions will expand at one time.<\/p>\n<p>The next tab is the Accordion Items tab. Here the content manager chooses the title they want to be the title of their accordion, the content type (whether plain text or a WYSIWYG), and the content of the accordion item.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-31 size-full\" src=\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_accordion_items-e1640640951967.png\" alt=\"\" width=\"741\" height=\"713\" \/><\/p>\n<p>Above is an example of plain text content. The content manager should select this content type if plain text will occupy the accordion. If the content manager desires to add a large amount of text then WYSIWYG should be selected.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><em><strong>[GIF NEEDED: Published Accordion with WYSIWYG Content Type]<\/strong><\/em><\/p>\n<p>&nbsp;<\/p>\n<p>The next tab is labeled <strong>Themes<\/strong>, and this is where the content manager will select the color scheme for this particular component. The manager will notice that there are six schemes available. If the manager does not know which to select, they should consult the Web Governance Document <strong>[LINK NEEDED]<\/strong>.<\/p>\n<p>As a general rule, the brightly colored schemes (Blues &amp; Purple) should not be used unless they are highlighting important information on the page that the content manager wants to stand out to the user.<\/p>\n<p>Content managers can edit the padding and borders of this particular component in the <strong>Styles<\/strong> tab.<\/p>\n<h3>What This Component can be Used For<\/h3>\n<p>The accordion component is versatile and can be implemented throughout the website.<\/p>\n<p>This component can be used on program pages to showcase concentrations or areas of study. It can also be used on department pages or residential pages to house information based on dorm locations.<\/p>\n<h3>Tips:<\/h3>\n<ol>\n<li>Content managers should always name their Accordions components based on the content it contains so that they and others can easily identify the contents of the accordion from the backend.<\/li>\n<li>Content managers should always check what the component will look like on all devices using the \u201cPreview\u201d feature before publishing the update.<\/li>\n<li>This component is available on Full-Width content sections, &amp; Sidebar Width content sections<\/li>\n<li style=\"text-align: center;\"><em><strong>[Image Needed: Examples of this Component in Full width vs Sidebar content sections?]<\/strong><\/em><\/li>\n<li>If any required fields are left blank within this component, the page will not be published.<\/li>\n<\/ol>\n<h3><\/h3>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Purpose of This Component This component was designed to show top-level keywords or keyphrases to grab the page user&#8217;s attention. The accompanying content is hidden from view unless the user clicks on the accordion to open it up. &nbsp; [GIF of Accordion opening and closing] &nbsp; The purpose of the Accordion component is to [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":15,"menu_order":4,"comment_status":"closed","ping_status":"closed","template":"templates\/SidebarWidth.php","meta":{"_acf_changed":false,"ngg_post_thumbnail":0,"footnotes":"","_links_to":"","_links_to_target":""},"class_list":["post-23","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Accordions | Office of Communications &amp; Marketing<\/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=\"Accordions | Office of Communications &amp; Marketing\" \/>\n<meta property=\"og:description\" content=\"The Purpose of This Component This component was designed to show top-level keywords or keyphrases to grab the page user&#8217;s attention. The accompanying content is hidden from view unless the user clicks on the accordion to open it up. &nbsp; [GIF of Accordion opening and closing] &nbsp; The purpose of the Accordion component is to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/\" \/>\n<meta property=\"og:site_name\" content=\"Office of Communications &amp; Marketing\" \/>\n<meta property=\"article:modified_time\" content=\"2022-06-16T14:02:13+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/webdev.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-1024x414.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=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/\",\"url\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/\",\"name\":\"Accordions | Office of Communications &amp; Marketing\",\"isPartOf\":{\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-1024x414.png\",\"datePublished\":\"2021-12-21T23:51:39+00:00\",\"dateModified\":\"2022-06-16T14:02:13+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#primaryimage\",\"url\":\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue.png\",\"contentUrl\":\"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue.png\",\"width\":2086,\"height\":844,\"caption\":\"Screenshot of an accordion component with four expandable items under the heading \\\"Accordions WYSIWYG Editor Heading\\\" on a dark blue background.\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.worcester.edu\/marketing-communications\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Communications Toolkit\",\"item\":\"https:\/\/www.worcester.edu\/marketing-communications\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Component Overview\",\"item\":\"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Accordions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.worcester.edu\/marketing-communications\/#website\",\"url\":\"https:\/\/www.worcester.edu\/marketing-communications\/\",\"name\":\"Office of Communications &amp; Marketing\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.worcester.edu\/marketing-communications\/?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 | Office of Communications &amp; Marketing","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":"Accordions | Office of Communications &amp; Marketing","og_description":"The Purpose of This Component This component was designed to show top-level keywords or keyphrases to grab the page user&#8217;s attention. The accompanying content is hidden from view unless the user clicks on the accordion to open it up. &nbsp; [GIF of Accordion opening and closing] &nbsp; The purpose of the Accordion component is to [&hellip;]","og_url":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/","og_site_name":"Office of Communications &amp; Marketing","article_modified_time":"2022-06-16T14:02:13+00:00","og_image":[{"url":"https:\/\/webdev.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-1024x414.png","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/","url":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/","name":"Accordions | Office of Communications &amp; Marketing","isPartOf":{"@id":"https:\/\/www.worcester.edu\/marketing-communications\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#primaryimage"},"image":{"@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#primaryimage"},"thumbnailUrl":"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue-1024x414.png","datePublished":"2021-12-21T23:51:39+00:00","dateModified":"2022-06-16T14:02:13+00:00","breadcrumb":{"@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#primaryimage","url":"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue.png","contentUrl":"https:\/\/www.worcester.edu\/marketing-communications\/wp-content\/uploads\/sites\/26\/2021\/12\/woostate_WTG_CO_accordions_example_accordion_blue.png","width":2086,"height":844,"caption":"Screenshot of an accordion component with four expandable items under the heading \"Accordions WYSIWYG Editor Heading\" on a dark blue background."},{"@type":"BreadcrumbList","@id":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/accordions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.worcester.edu\/marketing-communications\/"},{"@type":"ListItem","position":2,"name":"Communications Toolkit","item":"https:\/\/www.worcester.edu\/marketing-communications\/"},{"@type":"ListItem","position":3,"name":"Component Overview","item":"https:\/\/www.worcester.edu\/marketing-communications\/communications-toolkit\/component-overview\/"},{"@type":"ListItem","position":4,"name":"Accordions"}]},{"@type":"WebSite","@id":"https:\/\/www.worcester.edu\/marketing-communications\/#website","url":"https:\/\/www.worcester.edu\/marketing-communications\/","name":"Office of Communications &amp; Marketing","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.worcester.edu\/marketing-communications\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"}]}},"_links":{"self":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/23","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/comments?post=23"}],"version-history":[{"count":4,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/23\/revisions"}],"predecessor-version":[{"id":1785,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/23\/revisions\/1785"}],"up":[{"embeddable":true,"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/pages\/15"}],"wp:attachment":[{"href":"https:\/\/www.worcester.edu\/marketing-communications\/wp-json\/wp\/v2\/media?parent=23"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}