{"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-07-31T17:17:16","modified_gmt":"2026-07-31T21:17:16","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 class=\"wp-block-paragraph\">The Accordion block is a 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 only in instances when 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 class=\"wp-block-paragraph\">To add an Accordion block, click the &#8220;Add a block&#8221; button and choose &#8220;Accordion&#8221; from the block list. Alternatively, maintainers can find the block by using the &#8220;Search for a block&#8221; function. For more information on blocks and adding them to a WordPress site, see our <a href=\"https:\/\/university-communications.ncsu.edu\/documentation\/blocks\/\" target=\"_blank\" rel=\"noreferrer noopener\">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 class=\"wp-block-paragraph\">Once added, the Accordion block allows maintainers to add 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 class=\"wp-block-paragraph\">Additional customization is available through the block settings found in the right-hand menu. Creators can opt to have the Accordion block allow for every item to be open at once versus one panel at a time. There is also an option within each list item to have the panel open upon 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","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":14,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/435\/revisions"}],"predecessor-version":[{"id":39997,"href":"https:\/\/university-communications.ncsu.edu\/documentation\/wp-json\/wp\/v2\/reference-article\/435\/revisions\/39997"}],"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}]}}