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.element.js – the Smart HTML Elements framework.
  • smart.elements.js – the JS file containing the all Elements

If you want to use the HTML Element with older browsers, you will need to use Babel transpiled ES5 files and include the following files before smart.element.js:

  • native-shim.js – A polyfill for HTML Custom Elements v1.
  • smart.element-polyfills.js – A polyfill for web browsers with no Ecmascript 6 support.
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="webcomponents-lite.js">
</script>
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <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>

Note how smart.element.js and Web Components are declared before everything else. This is mandatory for all custom elements.

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="webcomponents-lite.js">
</script>
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <script type="text/javascript" src="../../source/smart.elements.js"></script>
 <script>
 window.onload = function () {
    let 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="webcomponents-lite.js">
</script>
 <script type="text/javascript" src="../../source/smart.element.js"></script>
 <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 () {
             var 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 () {
             var 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 () {
             var accordion = document.querySelector('smart-accordion');
             accordion.remove(0);
         }
     </script>
    

Keyboard Support

Key Action
Arrow Up Focuses on the upper item.
Arrow Down Focuses on the lower item.
Arrow Left Collapses item if the current expandMode allows it
Arrow Right Expands item if the current expandMode allows it
Home Focuses on the first item.
End Focuses on the last item.
Enter items could be expanded/collapsed via
Space items could be expanded/collapsed via