Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • June 29, 2020 at 3:02 pm #1226463
    weasyweb2015

    is possible to have an accordion open on desktop and closed on smarthphone?

    July 2, 2020 at 1:04 pm #1227477
    Ismael

    Hey weasyweb2015,

    Thank you for the inquiry.

    This should be possible by creating a custom script. Please try to add this snippet 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);

    This will close the open toggle on smaller screens.

    Best regards,
    Ismael

    October 5, 2023 at 8:23 pm #1421547
    csabaio

    Chatp GPT-4 has got me going! :D

    function custom_header_code() {
    ?>
	<script type="text/javascript">
			
		document.addEventListener('DOMContentLoaded', (event) => {
			if (window.innerWidth <= 600) {
				const div = document.querySelector('div#toggle-id-1');
				const p = document.querySelector('.toggler');
				if(div || p) {
					div.classList.remove('active_tc');
					p.classList.remove('activeTitle');
				}
			}
        });

	</script>
    <?php
}
add_action( 'wp_head', 'custom_header_code' );
    • This reply was modified 2 years ago by csabaio.
    October 6, 2023 at 2:14 am #1421570
    Nikko

    Hi csabaio,

    I’m glad Chat GPT-4 has helped you :D
    Let us know if you need further assistance.

    Best regards,
    Nikko

    October 6, 2023 at 9:23 am #1421589
    Guenni007

    Nice – but maybe it is best to select the div by its active state – because not always the first toggle is opend at start:

    
function custom_header_code() {
?>
<script type="text/javascript">    
    document.addEventListener('DOMContentLoaded', (event) => {
      if (window.innerWidth <= 768) {
        const div = document.querySelector('div.active_tc');
        const p = document.querySelector('.activeTitle');
        if(div || p) {
          div.classList.remove('active_tc');
          p.classList.remove('activeTitle');
        }
      }
    });
</script>
<?php
}
add_action( 'wp_head', 'custom_header_code' );

    and if you really want to have it only on mobile devices – you can have that without screen width detection.

    function custom_header_code() {
if(wp_is_mobile()){
?>
<script type="text/javascript">   
window.addEventListener("DOMContentLoaded", function () { 
        const div = document.querySelector('div.active_tc');
        const p = document.querySelector('.activeTitle');
        if(div || p) {
          div.classList.remove('active_tc');
          p.classList.remove('activeTitle');
        }
});
</script>
<?php
}}
add_action( 'wp_head', 'custom_header_code' );

    only if you choose the selector activeTitle – the symbol in front will be set to closed ( + )

  • Author
    Posts
Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.