-
Posts
-
Hi,
I’d like to open all accordion tabs with JavaScript on page opening. (The accordion is set to allow this.) The following code does not work:
const filtres = document.getElementsByClassName("toggler"); for (let i = 0; i < filtres.length; i++) { filtres[i].click(); }Thanks,
SergeHey photographie-tous-azimuts,
Thank you for the inquiry.
Make sure that the Content > Behavior > Behavior is set to Multiple toggles open allowed, then add this script in the functions.php file to open all toggles on page load:
function ava_custom_open_all_toggles_script() { ?> <script> (function($) { $(document).ready(function() { $('.single_toggle .toggler').each(function() { var $this = $(this); if ($this.attr('aria-expanded') === 'false') { $this.click(); } }); }); }(jQuery)); </script> <?php } add_action( 'wp_footer', 'ava_custom_open_all_toggles_script', 99 );Best regards,
IsmaelHi Ismael,
I have copied the code to the single page where I want this behaviour. It worked, but the page ends up scrolled to the first accordion and the page URL has the #last-accordion-id tag. If I refresh the page, the tag is changed to #last-accordion-id-closed and there is an extra line at the bottom of the column containing the accordion.
Thanks,
SergeHi,
Thank you for the update.
I have copied the code to the single page where I want this behaviour.
Where did you add the script? This should be added in the functions.php file. Please provide a test page so that we can check the modification.
Best regards,
IsmaelHi Ismael,
I added the script section of your code into a code block with a window.addEventListener call I already had for other purposes.
However, I did found a simpler solution: I now use accordion on small screens only (767px or less). On large screen, I use a simple code block with checkboxes only. This way, there is no need to make accordion open and deal with the resulting #tags that are added to the page URL when opening/closing accordion sections.
BTW, when I add code like the one below into accordion contents, the onClick parameter gets stripped out the next time I edit the accordion:
<div><input type="checkbox" class="filtre-de-cours" id="en-personne" name="en-personne" value="1" onclick="filtrerLesCours()"><label for="en-personne">En personne</label></div> <div><input type="checkbox" class="filtre-de-cours" id="en-ligne" name="en-ligne" value="2" onclick="filtrerLesCours()"><label for="en-ligne">En ligne</label></div> <div><input type="checkbox" class="filtre-de-cours" id="hybride" name="hybride" value="3" onclick="filtrerLesCours()"><label for="hybride">Hybride</label></div>Thanks,
SergeHi,
Thank you for the update.
I added the script section of your code into a code block with a window.addEventListener call I already had for other purposes.
The code should be added in the function.php file. It can be added to a Code Block element but you have to remove the PHP code.
However, I did found a simpler solution
Great! Glad to know that you’ve got this working. Let us know if you have any more questions.
Best regards,
Ismael
- The topic ‘Openi Accordion Tabs with Javascript’ is closed to new replies.