Snippets

Show/Hide Row on Click

  • Updated:

Below is some javascript for creating a simple toggle row show/hide functionality. The way it works is you would give any element that has a link the classname "my-hidden-row-toggle" (as always change my- to your unique prefix), give the row you want to open a unique ID and then use that ID for the link URL. Check out the video showing how that would work.

// CSS - Add wherever you put your custom CSS.
body:not(.compose-mode) .my-hidden-row:not(.my-hidden-row--active) {
	display: none;
}

// PHP - Add to child theme functions.php or via Code Snippets plugin.
add_action( 'wp_footer', function() { ?>
    
        document.addEventListener( 'click', function( event ) {
            button = event.target.closest( '.my-hidden-row-toggle' );
            if ( ! button ) {
                return;
            }
            var link = button;
            if ( 'A' !== link.tagName ) {
                link = button.querySelector( 'a' );
            }
            if ( ! link ) {
                return;
            }
            var href = link.getAttribute( 'href' );
            if ( ! href ) {
                return;
            }
            var hiddenRow = document.querySelector( href );
            if ( hiddenRow ) {
                hiddenRow.classList.toggle( 'my-hidden-row--active');
            }
            event.preventDefault();
            event.stopPropagation();
        } );
    
<?php }, 99 );
All PHP snippets should be added via child theme's functions.php file or via a plugin (we recommend Code Snippets)
Back To Top