{"id":435,"date":"2020-05-27T17:15:07","date_gmt":"2020-05-27T17:15:07","guid":{"rendered":"https:\/\/university-communications.ncsu.edu\/documentation\/?page_id=435"},"modified":"2026-02-27T17:32:42","modified_gmt":"2026-02-27T22:32:42","slug":"accordion-block","status":"publish","type":"reference-article","link":"https:\/\/university-communications.ncsu.edu\/documentation\/reference-article\/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:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/demo-accordion.gif\" alt=\"GIF showing how an accordion item expands when plus sign is clicked\" 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:\/\/university-communications.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:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/accordion-pt-1.gif\" alt=\"GIF showing how to add a new accordion block to a webpage\" 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:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/accordion-pt-2.gif\" alt=\"GIF showing how to add a header and additional text to an accordion item\" 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:\/\/university-communications.ncsu.edu\/documentation\/wp-content\/uploads\/sites\/21\/2020\/05\/accordion-pt-3.gif\" alt=\"GIF showing how to change the page load settings for the accordion block and individual accordion items\" 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},"featured_media":0,"template":"","meta":{"_acf_changed":false,"ncst_custom_author":"","ncst_show_custom_author":false,"ncst_dynamicHeaderBlockName":"ncst\/default-header","ncst_dynamicHeaderData":"{\"pageIntro\":\"Nesting information through collapsable drop downs.\"}","ncst_content_audit_freq":"","ncst_content_audit_date":"","ncst_content_audit_display":false,"ncst_backToTopFlag":"","_links_to":"","_links_to_target":""},"availability":[49],"content-type":[51],"class_list":["post-435","reference-article","type-reference-article","status-publish","hentry","availability-nc-state-theme","content-type-block"],"acf":[],"_links":{"self":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article"}],"about":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/types\/reference-article"}],"version-history":[{"count":13,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/435\/revisions"}],"predecessor-version":[{"id":39531,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/435\/revisions\/39531"}],"wp:attachment":[{"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"availability","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/availability?post=435"},{"taxonomy":"content-type","embeddable":true,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/content-type?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}