Collapsible Toggle Shortcode
Adds a [toggle] shortcode that hides text behind a clickable title, built on the native details element so it works without JavaScript.
Opens WPIDE on
Code
add_shortcode( 'toggle', function ( $atts, $content = '' ) {
$atts = shortcode_atts( array( 'title' => 'More', 'open' => 'no' ), $atts, 'toggle' );
$open = 'yes' === $atts['open'] ? ' open' : '';
return '<details class="wpide-toggle" style="margin:1em 0;padding:.75em 1em;border:1px solid rgba(0,0,0,.15);border-radius:4px;"' . $open . '><summary style="cursor:pointer;font-weight:600;">' . esc_html( $atts['title'] ) . '</summary><div style="margin-top:.75em;">' . wpautop( do_shortcode( wp_kses_post( (string) $content ) ) ) . '</div></details>';
} );Notes
Example: [toggle title="What is included?" open="no"]Answer here.[/toggle].
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.