{"id":23966,"date":"2024-02-15T14:53:34","date_gmt":"2024-02-15T22:53:34","guid":{"rendered":"https:\/\/docs.extraview.com\/v25\/book\/adding-accordion-folds-layouts-1\/"},"modified":"2025-03-02T21:01:46","modified_gmt":"2025-03-03T05:01:46","slug":"adding-accordion-folds-layouts-1","status":"publish","type":"page","link":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/","title":{"rendered":"Accordion Folds on Layouts"},"content":{"rendered":"<h3>Accordion Folds on <em>Add <\/em>&amp; <em>Edit <\/em>Layouts<\/h3>\n<p>Accordion folds may be added to your <em>Add<\/em> and <em>Edit<\/em> layouts to provide a flexible user interface, where sections will open and close at the click of a button. The accordion folds may be decorated with titles and themed to your own choice. You may also choose whether they render on the initial layout in a closed or an open state. You can include any number of accordion folds within a layout. Compare the use of accordion folds with <a href=\"v25\/adding-paged-layouts-1\/\">paged layouts<\/a>. Accordion folds allow multiple sections within a form to be open and closed at will by the end user, whereas paged layouts have multiple sections, only one of which may be visible at any one time.\u00a0 Note that when accordion folds are placed on layouts, they have no effect on the requiredness of fields they contain. A required field is required, whether the accordion fold is expanded or collapsed.<\/p>\n<p>The following screenshots show s traditional rendering of accordion folds.\u00a0 For alternative presentations see the section towards the end of this page.<\/p>\n<p><img decoding=\"async\" style=\"width: 90%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/fold-closed.png\" alt=\"\" \/><br \/>\n<cite>Closed Accordion Fold<\/cite><\/p>\n<p><img decoding=\"async\" style=\"width: 90%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/fold-open.png\" alt=\"\" \/><br \/>\n<cite>Open Accordion Fold<\/cite><\/p>\n<p>To set up an accordion fold on an <em>Add<\/em> or <em>Edit<\/em> layout, use the following procedure:<\/p>\n<ul>\n<li>Create two fields in the data dictionary.\n<ul>\n<li>The first field is used to mark the beginning of the accordion fold on the layout. The field must use a naming convention, beginning with the characters FOLD_PRE_. For example, FOLD_PRE_1 is a valid name for the field. The title should be a single space character, and the display type should be <b>Custom<\/b>. To provide a legend for the accordion fold, use the Help Text field. Providing the legend for the fold works best if defined in this manner, if you intend to use the same fold in several places throughout the installation.\u00a0 You may alternatively define the title within a layout cell attribute on a layout that uses the fold.\u00a0 This provides the flexibility of being able to reuse the same FOLD_PRE_ and FOLD_POST_ fields on many layouts, defining the title for each within the layout, and not in the data dictionary.\u00a0 If no HTML modifier with the syntax <strong>LEGEND:fold title<\/strong> is defined, the title in the data dictionary is used.\u00a0 Give the field read-only permission for each role that will use the shaded region<\/li>\n<li>The second field is used to mark the end of the shaded region on the layout. The field must use a naming convention, beginning with the characters FOLD_POST_. For example, FOLD_POST_1 is a valid name for the field. The title should be a single space character, and the display type should be <b>Custom<\/b>. Give the field read-only permission for each role that will use the shaded region<\/li>\n<\/ul>\n<\/li>\n<li>Place the FOLD_PRE_ and the FOLD_POST_ fields on the layout, giving each a colspan that extends the entire width of the layout. Obviously, the FOLD_PRE_ field is placed at the beginning of the region and the FOLD_POST_ field is placed at the end of the region<\/li>\n<li>If you place the fields to be rendered within a fold in an embedded layout, between the FOLD_PRE_field and the FOLD_POST_field, and you have the HTML modifier COLLAPSE, the fields within the accordion fold are not rendered when the layout is first displayed, but only when the user opens the fold. This is shown here within the Design Center:<img decoding=\"async\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/embedded-fold.png\" width=\"90%\" \/><\/li>\n<li>The advantage here is that if you have many fields within many embedded layouts, it may take a considerable amount of time to render the screen to the end user. Using this technique will save the rendering time when the <em>add<\/em> or <em>edit<\/em> screen is first displayed but will incur a small amount of time for the end user as they open each fold. The overall performance to the end user seems much improved by breaking down the initial delay into several much smaller delays.<\/li>\n<\/ul>\n<h4>Fold Configuration Options<\/h4>\n<p>The following layout cell attributes may be applied as HTML MODIFIERs\u00a0to the FOLD_PRE_ field, to provide styling and positioning of the fold as it is rendered on <em>add<\/em> or <em>edit<\/em> screens.<\/p>\n<table style=\"width: 100%;\" border=\"0\" cellspacing=\"2\" cellpadding=\"2\">\n<tbody>\n<tr>\n<td style=\"vertical-align: top;\">BGCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">Provides a background color to the accordion fold.\u00a0 To implement, add an HTML MODIFIER layout cell attribute to the FOLD_PRE_ field. This attribute should be of the form BGCOLOR:#nnnnnn where #nnnnnn is a valid hexadecimal color or HTML color name<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">BORDER_COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">To provide a border color to the accordion fold, add an HTML MODIFIER layout cell attribute to the FOLD_PRE_ field. This attribute should be of the form BORDER_COLOR:#nnnnnn where #nnnnnn is a valid hexadecimal color or HTML color name<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">COLLAPSE<\/td>\n<td style=\"vertical-align: top;\">By default, the accordion fold will be expanded when rendered on the layout, unless you include an HTML MODIFIER with a value of COLLAPSE, which will collapse the relevant accordion fold upon rendering and upon screen refreshes. Ajax and JavaScript refreshes will not affect the collapsed or expanded state of the accordion fold.\u00a0 Note that rules may be used to control the open or closed state of the fold<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">FOLD_DISPLAY:<em>value<\/em><\/td>\n<td style=\"vertical-align: top;\">This sets the fold&#8217;s display type.\u00a0 The value must be one of TRADITIONAL, SIMPLE, THIN_LINE or BORDER.\u00a0 If no attribute is defined the default value of TRADITIONAL is used, unless the FOLD_DISPLAY has been set at the PROJECT level of the AREA that contains the layout<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">FOLD_USER_IMG_PATH:<em>path<\/em><\/td>\n<td style=\"vertical-align: top;\">By default the standard <b>dn-arrow.png<\/b> and <b>rt-arrow.png<\/b> images from the appropriate image folder set in the IMG_HOME behavior setting are used on the accordion fold, depending upon whether the fold is collapsed or expanded. If you wish to use your own images, create a new folder called <b>user_images<\/b> in the images directory and place your images within this, named in the same manner. Then, include an HTML MODIFIER with a value of FOLD_USER_IMG_PATH, and the files in that folder will be used instead of the defaults<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">HDR_BGCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">To color the background to the text on the accordion fold, add an HTML MODIFIER layout cell attribute to the FOLD_PRE_ field. This attribute should be of the form HDR_BGCOLOR:#nnnnnn where #nnnnnn is a valid hexadecimal color.\u00a0 This setting is not supported with the THIN_LINE alternative presentation of accordion folds.\u00a0 Simply use the BGCOLOR layout cell attribute<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">HDR_TXT_COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">To color the text provided as the title to the accordion fold, add an HTML MODIFIER layout cell attribute to the FOLD_PRE_ field. This attribute should be of the form HDR_TXT_COLOR:#nnnnnn where #nnnnnn is a valid hexadecimal color<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">HIGHLIGHT_COLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">Modifies the color of the text on the fold when the user&#8217;s mouse is placed over the fold.\u00a0 This attribute should be of the form HIGHLIGHT_COLOR:#nnnnnn where #nnnnnn is a valid hexadecimal color.<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">HIGHLIGHT_BGCOLOR:<em>color<\/em><\/td>\n<td style=\"vertical-align: top;\">Modifies the background color of the fold when the user&#8217;s mouse is placed over the fold.\u00a0 This attribute should be of the form HIGHLIGHT_BGCOLOR:#nnnnnn where #nnnnnn is a valid hexadecimal color.<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">LEGEND:<em>title<\/em><\/td>\n<td style=\"vertical-align: top;\">An HTML MODIFIER of the form <strong>LEGEND:This is my fold <\/strong>will place the text on the header to the fold.\u00a0 The text will be visible when the fold is both closed and open.\u00a0 Clicking on the text or the surrounding area is what causes the fold to open and close<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">NO_INDENT<\/td>\n<td style=\"vertical-align: top;\">By default, the accordion fold will be indented to line up with the column of the first field on the layout, as opposed to the column of the first field\u2019s label. If you include an HTML MODIFIER with a value of NO_INDENT, the accordion fold will not be indented<\/td>\n<\/tr>\n<tr>\n<td style=\"vertical-align: top;\">SIZE:<em>nn<\/em><\/td>\n<td style=\"vertical-align: top;\">Note, this is the standard layout cell attribute of the type SIZE, and not an HTML MODIFIER. By default, the width of the accordion fold is determined by the rendering of the relevant layout, but you may manually set its width with the SIZE layout cell attribute. The is an integer value which will be converted to a pixel width for the Fold Section. Note that by overriding the default width handling, the Administrator is responsible to ensure that the fields within the accordion fold fit within the rendered section. This factor is also affected by a user\u2019s personal <b>Text size<\/b> setting, so be sure to check the look of your layouts with the <b>small<\/b>, <b>medium<\/b> and <b>large<\/b> text sizes<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h4>Controlling Fold States with Business Rules<\/h4>\n<p>As stated above, the initial state of the contents of an accordion fold is that all the contents are visible, unless you have placed a layout cell attribute of the type HTML MODIFIER and a value of <b>COLLAPSE<\/b> on the <b>FOLD_PRE_xxxx<\/b> field. It is often useful to set the initial state of the contents programmatically to open or closed, based upon one or more values within the issue you are adding or updating. This is accomplished with four components:<\/p>\n<ul>\n<li>The entire contents of the fold must be placed within an embedded layout placed on the <em>add<\/em> or <em>edit<\/em> layout<\/li>\n<li>The <b>FOLD_PRE_xxxx<\/b> and <b>FOLD_POST_xxxx<\/b> fields must be placed on the <em>add<\/em> or <em>edit<\/em> layout surrounding the embedded layout.<\/li>\n<\/ul>\n<p>Rules may also be used to open and close folds, depending on conditions you set.\u00a0 For example, when a user opens any one fold, you may close other open folds.\u00a0 In this way you might configure a screen so that only a single fold is open at any one point in time.\u00a0 See the page on <a href=\"v25\/rules-accordion-folds-1\/\">Rules &amp; Accordion Folds<\/a> for details.<\/p>\n<h4>Accordion Folds &amp; Required Fields<\/h4>\n<p>When you first generate an <em>add<\/em> or <em>edit<\/em> screen that contains accordion folds in the closed state, the fields within the fold are not rendered to the browser immediately but are only rendered when the user opens the fold. This is for performance reasons &#8211; consider that you might have dozens of folds containing hundreds of fields on a large, complex layout. In this instance the initial rendering is optimized to only send the folds themselves and not their content to the browser. Upon opening an individual fold, an Ajax call to the server gets the data for just that fold, typically fetching a modest number of fields in a short time. However, some closed folds may contain required fields, and the user might never open these folds. Even if these fields are not in the initial load of the screen form, ExtraView will check for any required fields within these folds when the user submits the issue and ensure they are entered by the user.<\/p>\n<h4>Accordion Folds &amp; Paged Layouts<\/h4>\n<p>It is not recommended to nest Accordion Fold fields within Paged layouts, or vice versa.\u00a0This does not provide a very usable user interface, and you might encounter some unexpected behavior.<\/p>\n<h3>Accordion Folds on Detailed Report &amp; History Layouts<\/h3>\n<p>Accordion folds may be added to Detailed report and History layouts.\u00a0 They differ in their configuration from folds implemented on <em>add <\/em>and <em>edit <\/em>layouts.\u00a0 There are\u00a0several\u00a0reasons for this:<\/p>\n<ol>\n<li>When the user\u00a0creates a\u00a0Detailed\u00a0report,\u00a0it might contain different issues from different Business Areas, each with different saved layouts<\/li>\n<li>On both Detailed reports and History output, you do not want to open the same fold in each issue \/ section of the output when you click on a fold within a single issue \/ section<\/li>\n<\/ol>\n<p>Further, for technical reason, the folds must be inserted as the reports are being rendered to the browser, long after the layouts are processed.\u00a0 At this time, there is no access to layout cell attributes to provide the same configuration options as the folds on <em>add <\/em>and <em>edit <\/em>layouts.\u00a0 Folds on Detailed reports and History layouts are configured as follows:<\/p>\n<ul>\n<li>Create two fields in the data dictionary.\n<ul>\n<li>The first field is used to mark the beginning of the accordion fold on the layout. The field must use a naming convention, beginning with the characters REPORT_FOLD_PRE_. For example, REPORT_FOLD_PRE_1 is a valid name for the field. The title should contain the text you wish to see on the fold, and the display type should be <b>Custom<\/b>.\u00a0 You must set <strong>Select for Reports<\/strong> and provide permission to read the field<\/li>\n<li>The second field is used to mark the end of the shaded region on the layout. The field must use a naming convention, beginning with the characters REPORT_FOLD_POST_. For example, REPORT_FOLD_POST_1 is a valid name for the field. The title should be a single space character, and the display type should be <b>Custom<\/b>. You must set <strong>Select for Reports<\/strong> and give the field read-only permission for each role that will use the shaded region<\/li>\n<\/ul>\n<\/li>\n<li>Place the REPORT_FOLD_PRE_ and the REPORT_FOLD_POST_ fields on the Detailed report layout, giving each a colspan that extends the entire width of the layout. Obviously, the REPORT_FOLD_PRE_ field is placed at the beginning of the region and the REPORT_FOLD_POST_ field is placed at the end of the region<\/li>\n<li>The folds are always initialized in the open state<\/li>\n<li>No layout cell attributes are used on the layouts for these fields and will be ignored if set.<\/li>\n<li>Business rules cannot be used to control the folds<\/li>\n<\/ul>\n<h3>Alternative Presentations of Accordion Folds<\/h3>\n<p>Accordion folds may be set globally throughout the site, set for the entire scope of any combination of Area and Project with the normal inheritance rules being obeyed., or set with a layout cell attribute on any fold within a layout on an <em>add<\/em> or <em>edit<\/em> screen.<\/p>\n<p>The global setting is controlled by the behavior setting named FOLD_DISPLAY.\u00a0 To set a different presentation for folds on Business Areas and Projects, go to the list management utility for the PROJECT field and set the style of folds within that screen.<\/p>\n<p>To set an alternative presentation for an individual fold on an <em>add<\/em> or <em>edit<\/em> screen use a layout cell attribute of type HTML MODIFIER, and a value of FOLD_DISPLAY:&lt;type&gt; where &lt;type&gt; is one of TRADITIONAL, THIN_LINE, SIMPLE or BORDER<\/p>\n<table border=\"0\" cellspacing=\"2\" cellpadding=\"2\">\n<tbody>\n<tr bgcolor=\"#ddd\">\n<td>FOLD_DISPLAY value<\/td>\n<td>Appearance<\/td>\n<\/tr>\n<tr>\n<td>TRADITIONAL<\/td>\n<td><img decoding=\"async\" style=\"width: 90%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/fold-traditional.png\" alt=\"\" \/><\/td>\n<\/tr>\n<tr>\n<td>THIN_LINE<\/td>\n<td><img decoding=\"async\" style=\"width: 90%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/fold-thin-line.png\" alt=\"\" \/><\/td>\n<\/tr>\n<tr>\n<td>SIMPLE<\/td>\n<td><img decoding=\"async\" style=\"width: 90%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/fold-simple.png\" alt=\"\" \/><\/td>\n<\/tr>\n<tr>\n<td>BORDER<\/td>\n<td><img decoding=\"async\" style=\"width: 90%;\" src=\"\/v25\/extraview-media\/images\/ag\/fields_and_layouts\/fold-border.png\" alt=\"\" \/><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n","protected":false},"excerpt":{"rendered":"<p>Accordion Folds on Add &amp; Edit Layouts Accordion folds may be added to your Add and Edit layouts to provide a flexible user interface, where sections will open and close at the click of a button. The accordion folds may be decorated with titles and themed to your own choice. You may also choose whether&#8230;<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":23935,"menu_order":2,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"_lmt_disableupdate":"no","_lmt_disable":"","_kad_blocks_custom_css":"","_kad_blocks_head_custom_js":"","_kad_blocks_body_custom_js":"","_kad_blocks_footer_custom_js":"","_kad_post_transparent":"","_kad_post_title":"","_kad_post_layout":"","_kad_post_sidebar_id":"","_kad_post_content_style":"","_kad_post_vertical_padding":"","_kad_post_feature":"","_kad_post_feature_position":"","_kad_post_header":false,"_kad_post_footer":false,"footnotes":""},"class_list":["post-23966","page","type-page","status-publish","hentry"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.1 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Accordion Folds on Layouts - Product Documentation<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Accordion Folds on Layouts - Product Documentation\" \/>\n<meta property=\"og:description\" content=\"Accordion Folds on Add &amp; Edit Layouts Accordion folds may be added to your Add and Edit layouts to provide a flexible user interface, where sections will open and close at the click of a button. The accordion folds may be decorated with titles and themed to your own choice. You may also choose whether...\" \/>\n<meta property=\"og:url\" content=\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/\" \/>\n<meta property=\"og:site_name\" content=\"Product Documentation\" \/>\n<meta property=\"article:modified_time\" content=\"2025-03-03T05:01:46+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=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/\",\"url\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/\",\"name\":\"Accordion Folds on Layouts - Product Documentation\",\"isPartOf\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\"},\"datePublished\":\"2024-02-15T22:53:34+00:00\",\"dateModified\":\"2025-03-03T05:01:46+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"ExtraView 25\",\"item\":\"https:\/\/docs.extraview.com\/v25\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Administration Guide\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Site Configuration Menu\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/\"},{\"@type\":\"ListItem\",\"position\":5,\"name\":\"Design Center\",\"item\":\"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/\"},{\"@type\":\"ListItem\",\"position\":6,\"name\":\"Accordion Folds on Layouts\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#website\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"name\":\"ExtraView Product Documentation\",\"description\":\"ExtraView Documentation\",\"publisher\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#organization\",\"name\":\"ExtraView Corporation\",\"url\":\"https:\/\/docs.extraview.com\/v25\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"contentUrl\":\"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png\",\"width\":512,\"height\":512,\"caption\":\"ExtraView Corporation\"},\"image\":{\"@id\":\"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Accordion Folds on Layouts - Product Documentation","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/","og_locale":"en_US","og_type":"article","og_title":"Accordion Folds on Layouts - Product Documentation","og_description":"Accordion Folds on Add &amp; Edit Layouts Accordion folds may be added to your Add and Edit layouts to provide a flexible user interface, where sections will open and close at the click of a button. The accordion folds may be decorated with titles and themed to your own choice. You may also choose whether...","og_url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/","og_site_name":"Product Documentation","article_modified_time":"2025-03-03T05:01:46+00:00","twitter_card":"summary_large_image","twitter_misc":{"Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/","url":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/","name":"Accordion Folds on Layouts - Product Documentation","isPartOf":{"@id":"https:\/\/docs.extraview.com\/v25\/#website"},"datePublished":"2024-02-15T22:53:34+00:00","dateModified":"2025-03-03T05:01:46+00:00","breadcrumb":{"@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/adding-accordion-folds-layouts-1\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":2,"name":"ExtraView 25","item":"https:\/\/docs.extraview.com\/v25\/"},{"@type":"ListItem","position":3,"name":"Administration Guide","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/"},{"@type":"ListItem","position":4,"name":"Site Configuration Menu","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/"},{"@type":"ListItem","position":5,"name":"Design Center","item":"https:\/\/docs.extraview.com\/v25\/extraview-25\/administration-guide-1\/site-configuration-menu-1\/design-center-4\/"},{"@type":"ListItem","position":6,"name":"Accordion Folds on Layouts"}]},{"@type":"WebSite","@id":"https:\/\/docs.extraview.com\/v25\/#website","url":"https:\/\/docs.extraview.com\/v25\/","name":"ExtraView Product Documentation","description":"ExtraView Documentation","publisher":{"@id":"https:\/\/docs.extraview.com\/v25\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/docs.extraview.com\/v25\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/docs.extraview.com\/v25\/#organization","name":"ExtraView Corporation","url":"https:\/\/docs.extraview.com\/v25\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/","url":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","contentUrl":"https:\/\/docs-stg.extraview.com\/wp-content\/uploads\/2024\/03\/favicon.png","width":512,"height":512,"caption":"ExtraView Corporation"},"image":{"@id":"https:\/\/docs.extraview.com\/v25\/#\/schema\/logo\/image\/"}}]}},"taxonomy_info":[],"featured_image_src_large":false,"author_info":{"display_name":"carl.koppel","author_link":"https:\/\/docs.extraview.com\/v25\/author\/carl-koppel\/"},"comment_info":0,"_links":{"self":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23966","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/comments?post=23966"}],"version-history":[{"count":0,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23966\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/pages\/23935"}],"wp:attachment":[{"href":"https:\/\/docs.extraview.com\/v25\/wp-json\/wp\/v2\/media?parent=23966"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}