Accordion - Documentation | www.HtmlElements.com

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.

Files

  • CSS files
    • smart.default.css - the CSS file containing the styles for the element.
  • Javascript module
    • smart.accordion.js - the JS module which is in the source/modules/ folder and loads all script dependencies.
  • Javascript files
    • smart.element.js – the base class
    • smart.button.js – the JS file containing the definition for the buttons.
    • smart.accordion.js – the JS file containing the element definition

Usage

  • Import a module

    With this approach, we import a module and create the web component by using the Smart function. The #accordion is a smart-accordion tag.

    	import {smartAccordion} from "../../source/modules/smart.accordion.js";
    
    	Smart('#accordion', class {
    	get properties() {
    		return {
    			reorder: true
    		}
    	}
    	});
    
    	document.readyState === 'complete' ? init() : window.onload = init;
    
    	function init() { 
    
    	}
    	
    Using the Smart function is optional. You can use const accordion = document.querySelector("#accordion"); and set the properties like that:
    	const accordion = document.querySelector("#accordion");
    	accordion.reorder = true;
    	

  • Import a module, Init on Demand

    The following imports the web component's module and creates it on demand, when the document is ready. The #accordion is a DIV tag.

    	import {smartAccordion} from "../../source/modules/smart.accordion.js";
    
    	document.readyState === 'complete' ? init() : window.onload = init;
    
    	function init() { 
    	const accordion = new smartAccordion('#accordion', {
    	  
    	});
    	}
    	
  • Load scripts

    The following code adds the custom element 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.element.js"></script>
    	 <script type="text/javascript" src="../../source/smart.button.js"></script>
    	 <script type="text/javascript" src="../../source/smart.accordion.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

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

Create, Append, Remove, Get/Set Property, Invoke Method, Bind to Event


Create a new element:
	const accordion = document.createElement('smart-accordion');
	

Append it to the DOM:
	document.body.appendChild(accordion);
	

Remove it from the DOM:
	accordion.parentNode.removeChild(accordion);
	

Set a property:
	accordion.propertyName = propertyValue;
	

Get a property value:
	const propertyValue = accordion.propertyName;
	

Invoke a method:
	accordion.methodName(argument1, argument2);
	

Add Event Listener:
	const eventHandler = (event) => {
	// your code here.
	};

	accordion.addEventListener(eventName, eventHandler);
	

Remove Event Listener:
	accordion.removeEventListener(eventName, eventHandler, true);
	

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

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