Overview

The smart-accordion element represents a custom element with expandable items - smart-accordion-item. Each item contains header and content part. Click on the header toggles the content part.

To initialize an accordion element the user has to include the following files to the head of the page:

  • smart.default.css - the CSS file containing the styles for the Accordion element.
  • smart.elements.js - the JS file containing the all Elements

Import Accordion Web Component in a module

The following code can be used to import the accordion in a module.

import '../../source/smart.elements.js';    

The following code adds an accordion to the page.

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
</head>
<body>
 <smart-accordion>
  <smart-accordion-item label="Item 1" content="Content 1" expanded></smart-accordion-item>
  <smart-accordion-item label="Item 2" content="Content 2"></smart-accordion-item>
  <smart-accordion-item label="Item 3" content="Content 3"></smart-accordion-item>  
 </smart-accordion>
</body>
</html>

Demo

Appearance

The element contains items of type smart-accordion-item. Each item has:
  • label - used as header part in the accordion item. The content part could be toggled on label's click.
  • content - the content part of the item. It could be HTML or plain text.
The user can add/remove/update items via insert, remove and update methods:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.defaut.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
 <script>
 window.onload = function () {
    const accordion = document.querySelector('smart-accordion');
    accordion.insert(0, { "label": "New label", "content": "New content" });
    accordion.update(1, { "label": "Updated label 1", "content": "Updated content 1 " });
    accordion.remove(2);
 }
 </script>
</head>
<body>
 <smart-accordion>
  <smart-accordion-item label="Item 1" content="Content 1" expanded></smart-accordion-item>
  <smart-accordion-item label="Item 2" content="Content 2"></smart-accordion-item>
  <smart-accordion-item label="Item 3" content="Content 3"></smart-accordion-item>  
 </smart-accordion>
</body>
</html>

Demo

Behavior

User can expand/collapse items according to the current expandMode:
  • 'single' - only one item can be expanded. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown.
  • 'singleFitHeight' - only one item can be expanded. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown inside the content of the expanded item.
  • 'multiple' - multiple items can be expanded. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown.
  • 'toggle' - only one item can be expanded. The expanded item can also be collapsed. If the expanded item's height is greater than the value of the height property, a vertical scrollbar is shown.
  • 'none' - no items can be expanded/collapsed.
On initialization expanded items could be defined as an array in expandedIndexes property. If the expand mode allows single expanded item the array is limited to the first value and this index is expanded.

 <smart-accordion expand-mode="multiple" expanded-indexes="[0,1]">
  <smart-accordion-item label="Item 1" content="Content 1" expanded></smart-accordion-item>
  <smart-accordion-item label="Item 2" content="Content 2"></smart-accordion-item>
  <smart-accordion-item label="Item 3" content="Content 3"></smart-accordion-item>  
 </smart-accordion>

Demo

smart-accordion has expand and collapse methods.

Here's how to expand and collapse items:

<!DOCTYPE html>
<html lang="en">
<head>
 <link rel="stylesheet" href="../../source/styles/smart.default.css" type="text/css" />
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
 <script>
 window.onload = function () {
    let accordion = document.querySelector('smart-accordion');
    accordion.expandMode = 'multiple';
    accordion.expand(1);
    accordion.expand(2);
    accordion.collapse(0);
 }
 </script>
</head>
<body>
 <smart-accordion>
  <smart-accordion-item label="Item 1" content="Content 1" expanded></smart-accordion-item>
  <smart-accordion-item label="Item 2" content="Content 2"></smart-accordion-item>
  <smart-accordion-item label="Item 3" content="Content 3"></smart-accordion-item>  
 </smart-accordion>
</body>
</html>

The animation class added in Smart.Accordion, produces smooth animation in the transition between expanded and collapsed state of the accordion items. The speed of the animation is defined in --smart-accordion-animation-duration CSS variable.

Demo

Manipulating the content

The element offers the following methods about item's manipulations:
  • insert - sets the menu to maximized mode.

     <script>
         window.onload = function () {
             const accordion = document.querySelector('smart-accordion');
             accordion.insert(0, { "label": "New label", "content": "New content" });
         }
     </script>
    
  • update - sets the menu to maximized mode.

     <script>
         window.onload = function () {
             const accordion = document.querySelector('smart-accordion');
             accordion.update(0, { "label": "Updated label 0", "content": "Updated content 0 " });
         }
     </script>
    
  • remove - sets the menu to maximized mode.

     <script>
         window.onload = function () {
             const accordion = document.querySelector('smart-accordion');
             accordion.remove(0);
         }
     </script>
    

Keyboard Support

KeyAction
Arrow UpFocuses on the upper item.
Arrow DownFocuses on the lower item.
Arrow LeftCollapses item if the current expandMode allows it
Arrow RightExpands item if the current expandMode allows it
HomeFocuses on the first item.
EndFocuses on the last item.
Enteritems could be expanded/collapsed via
Spaceitems could be expanded/collapsed via