Accordion Core Component allows users to create expandable and collapsable sections. It is often used to organize and simplify long or complex text by breaking it up into smaller, more manageable sections. Each section of an accordion is typically represented by a header, which the user can click to expand or collapse the corresponding content.
The Accordion Core Component is used to organize related information and shorten pages reducing user scroll, particularly if space is at a premium and long content does not need to display all at once.
The Accordion Core Component creates a vertically stacked list of headers that reveal or hide associated sections of content. It functions as an accordion with authorable sections, allowing the user to show and hide sections of related content on a page.
View on public site:
The configure dialog allows the content author to define the accordion item, its panels, and how it will behave and appear for a visitor to the page.
After adding the Accordion component to the page, authors will need to add components within the accordion.
After adding the Accordion component, click on the wrench to configure the Accordion.
Use the Add button to open the component selector to choose which component to add as a panel. Once added, an entry is added to the list, which contains the following columns:
The content author can use the Select Panel on the component toolbar to change to a different panel for editing as well as to easily rearrange the order of the panels within the accordion.
The Select Panel pulldown allows content authors to select the panel to which content can be added/edited on the page. Upon selecting the Select Panel from the toolbar, a list with the configured accordion panels appears. Users can select which panel to edit or users can rearrange the panels using the drag handles.
Expand the sections below to see the Accordion Core Component's HTML and JS output.
var isOpenCount = 0;
function handleOpenCount() {
if (isOpenCount == 0) {
$('.uscb-accordion-expand-all').switchClass('uscb-accordion-expand-collapse', 'uscb-accordion-expand-collapse-disabled');
$('.uscb-accordion-close-all').switchClass('uscb-accordion-expand-collapse-disabled', 'uscb-accordion-expand-collapse');
}
else if (isOpenCount == $(".uscb-accordion").length) {
$('.uscb-accordion-expand-all').switchClass('uscb-accordion-expand-collapse-disabled', 'uscb-accordion-expand-collapse');
$('.uscb-accordion-close-all').switchClass('uscb-accordion-expand-collapse', 'uscb-accordion-expand-collapse-disabled');
} else {
$('.uscb-accordion-expand-all').switchClass('uscb-accordion-expand-collapse-disabled', 'uscb-accordion-expand-collapse');
$('.uscb-accordion-close-all').switchClass('uscb-accordion-expand-collapse-disabled', 'uscb-accordion-expand-collapse');
}
}
$('.uscb-accordion-expand-all').click(function () {
$(".uscb-accordion").each(function (index, element) {
$(element).children('.uscb-accordion_panel').removeClass("uscb-accordion-show-panel");
var $icon = $(this).children('.uscb-accordion_panel_head').children('.uscb-chevron-icon-img');
$icon.removeClass("o-angle-down-1");
$icon.addClass("o-angle-up-1");
});
handleOpenCount();
isOpenCount = $(".uscb-accordion").length;
});
$('.uscb-accordion-close-all').click(function () {
$(".uscb-accordion").each(function (index, element) {
$(element).children('.uscb-accordion_panel').addClass("uscb-accordion-show-panel");
var $icon = $(this).children('.uscb-accordion_panel_head').children('.uscb-chevron-icon-img');
$icon.removeClass("o-angle-up-1");
$icon.addClass("o-angle-down-1");
});
handleOpenCount();
isOpenCount = 0;
});
$(".uscb-accordion").each(function (index, element) {
$(element).click(function () {
$(this).children('.uscb-accordion_panel').toggleClass("uscb-accordion-show-panel");
if ($(this).children('.uscb-accordion_panel').hasClass("uscb-accordion-show-panel")) {
--isOpenCount
if (isOpenCount <= 0) {
isOpenCount = 0;
}
var $icon = $(this).children('.uscb-accordion_panel_head').children('.uscb-chevron-icon-img');
$icon.removeClass("o-angle-up-1");
$icon.addClass("o-angle-down-1");
} else {
++isOpenCount;
var $icon = $(this).children('.uscb-accordion_panel_head').children('.uscb-chevron-icon-img');
$icon.removeClass("o-angle-down-1");
$icon.addClass("o-angle-up-1");
}
handleOpenCount();
});
});