{"id":435,"date":"2020-05-27T17:15:07","date_gmt":"2020-05-27T17:15:07","guid":{"rendered":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/?page_id=435"},"modified":"2022-09-13T00:32:10","modified_gmt":"2022-09-13T04:32:10","slug":"accordion-block","status":"publish","type":"page","link":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/products\/nc-state-web-platform\/blocks\/accordion-block\/","title":{"rendered":"Accordion Block"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\">Use Cases<\/h2>\n\n\n\n<p>The Accordion block is a sort of styled list that grants site maintainers the option to have information nested through a collapsible drop down. An example of several blocks within a block, the Accordion block allows for several lines of text through its &#8220;Add an item&#8221; feature which provides the option of adding multiple paragraph blocks within the accordion block. The Accordion block should be used sparingly and in instances where a list of information is necessary. Examples of where an Accordion block could be useful is an FAQ or Help page where users may be looking for specific information in a list and do not need to read all of the content provided. See an example of an Accordion block below.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/demo-accordion.gif\" alt=\"\" class=\"wp-image-663\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Features<\/h2>\n\n\n\n<p>In Gutenberg, adding an Accordion block to a page is as easy as clicking the &#8220;Add a block&#8221; button and choosing &#8220;Accordion&#8221; from the block list. Alternatively, the block can be found by using the &#8220;Search for a block&#8221; function. For more info on blocks and adding them to a WordPress site, see our <a rel=\"noreferrer noopener\" href=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/platforms\/nc-state-theme\/blocks\/\" target=\"_blank\">documentation on blocks<\/a>.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/accordion-pt-1.gif\" alt=\"\" class=\"wp-image-658\"\/><\/figure>\n\n\n\n<p>Once added, the Accordion block allows for the addition of multiple list items through the use of its &#8220;Add an item&#8221; button. It&#8217;s important to note that hitting enter will not create another item in the accordion list (only a new paragraph entry), so be sure to use the &#8220;Add an item&#8221; feature.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/accordion-pt-2.gif\" alt=\"\" class=\"wp-image-659\"\/><\/figure>\n\n\n\n<p>Additional customization is available through the block settings found on the right-hand side menu. Creators can opt to have the Accordion block allow for every item to be open at once versus one panel at a time. Furthermore, there is an option within each list item to have the panel open on page load as opposed to being closed by default. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1500\" height=\"878\" src=\"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-content\/uploads\/2020\/05\/accordion-pt-3.gif\" alt=\"\" class=\"wp-image-661\"\/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">Need help?<\/h2>\n\n\n\n<p>Have questions? Feel free to reach out with any questions or concerns at\u00a0<a href=\"http:\/\/go.ncsu.edu\/ucomm-dev-request\">go.ncsu.edu\/ucomm-dev-request<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Use Cases The Accordion block is a sort of styled list that grants site maintainers the option to have information nested through a collapsible drop down. An example of several&hellip;<\/p>\n","protected":false},"author":3,"featured_media":0,"parent":178,"menu_order":12,"comment_status":"closed","ping_status":"closed","template":"","meta":{"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Nesting information through collapsable drop downs.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","footnotes":"","_links_to":"","_links_to_target":""},"acf":[],"_links":{"self":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/435"}],"collection":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":11,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/435\/revisions"}],"predecessor-version":[{"id":3001,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/435\/revisions\/3001"}],"up":[{"embeddable":true,"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/pages\/178"}],"wp:attachment":[{"href":"https:\/\/dev.ucomm.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}