Accordion Element – set "Initial Open" depending on screen size

Hey HagenWittig,

Thank you for the inquiry.

We could close the active item on mobile view by clicking it using a custom script, or by dispatching a click event on that particular item. Please try to add this code in the functions.php file.

add_action('wp_footer', function() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
     if(window.innerWidth > 769) return;
     document.getElementsByClassName("activeTitle")[0].dispatchEvent(new Event('click'));
});
</script>
<?php
}, 9999);

The code should work when the screen width of the device is less than 769px. Let us know if it helps.

Best regards,
Ismael

Hi,

Thank you for the update.

We cannot find the recommended script in the document or page. Did you remove it? Please add the script again so that we could check if it is actually working or if there is any error. Please make sure to copy the code directly from the forum and not from your email.

Best regards,
Ismael

Hi,

Thank you for the info.

We just noticed that all toggler are opened on page load, so we adjusted the script in the functions.php file a bit to loop through all togglers and close all of them on mobile view. This is the final code.

/*-------------------------------------------------------------
// Close open accordion toggles on mobile devices
//------------------------------------------------------------*/

add_action('wp_footer', function() {
?>
<script>
document.addEventListener("DOMContentLoaded", function() {
     if(window.innerWidth > 769) return;
	 setTimeout(function() {		 
		 var actives = document.getElementsByClassName("toggler");
		 Array.prototype.forEach.call(actives, el => {
			el.dispatchEvent(new Event('click'));
			el.classList.remove("activeTitle");
		});
	 }, 500);
});
</script>
<?php
}, 9999);

Best regards,
Ismael

Hi,

You are very welcome! Glad it is working.

To prevent the script from executing on other pages, please look for this line in the script above.

if(window.innerWidth > 769) return;

Below that, add this code.

 var terminvereinbarung= document.querySelector(".page-id-3779");
  if(!terminvereinbarung) return;

Best regards,
Ismael