6.2 with better JS code

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 !
 

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';
+        });
+    });
+});