diff --git a/readme.txt b/readme.txt index 8c2464d..390e2a0 100644 --- a/readme.txt +++ b/readme.txt @@ -4,7 +4,7 @@ Tags: TOC, Table of Contents, Gutenberg, block, FAQ Requires at least: 5.9 Donate link: https://marc.tv/out/donate Tested up to: 6.4 -Stable tag: 6.1.1 +Stable tag: 6.2.0 Requires PHP: 7.0 License: GPLv2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html @@ -51,6 +51,10 @@ SimpleTOC is open-source and developed on [GitHub Pages](https://github.com/mtoe == Changelog == += 6.2.0 = +* Feature: Added animation to accordion menu. +* Feature: Better styling for accordion menu. + = 6.1.0 = * Fixed: Broken markup when tags closed for headers below minimum. Thanks @harmoney ! diff --git a/src/accordion.js b/src/accordion.js index 1d47bc4..49c32c3 100644 --- a/src/accordion.js +++ b/src/accordion.js @@ -1,26 +1,14 @@ -document.addEventListener( 'DOMContentLoaded', () => { - const buttons = document.querySelectorAll( 'button.simpletoc-collapsible' ); +document.addEventListener('DOMContentLoaded', () => { + const buttons = document.querySelectorAll('button.simpletoc-collapsible'); - buttons.forEach( ( button ) => { - button.addEventListener( 'click', function () { - this.classList.toggle( 'active' ); - const content = this.parentElement.nextElementSibling; - const isCollapsed = - ! content.style.maxHeight || content.style.maxHeight === '0px'; - const ariaExpanded = this.getAttribute( 'aria-expanded' ); - if ( ariaExpanded === 'true' ) { - this.setAttribute( 'aria-expanded', 'false' ); - } else { - this.setAttribute( 'aria-expanded', 'true' ); - } + buttons.forEach(button => { + button.addEventListener('click', () => { + button.classList.toggle('active'); + const content = button.parentElement.nextElementSibling; + const isCollapsed = !content.style.maxHeight || content.style.maxHeight === '0px'; - if ( isCollapsed ) { - // Expand the content - content.style.maxHeight = content.scrollHeight + 'px'; - } else { - // Collapse the content - content.style.maxHeight = '0px'; - } - } ); - } ); -} ); + button.setAttribute('aria-expanded', isCollapsed ? 'true' : 'false'); + content.style.maxHeight = isCollapsed ? `${content.scrollHeight}px` : '0px'; + }); + }); +});