# 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.

- Type: PHP
- Runs: Run everywhere
- Category: [Content](https://wpide.com/library/category/content/)
- Tags: shortcode, accordion, toggle
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/toggle-shortcode/

## Code

```php
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 use it

Install the free WPIDE plugin (https://wordpress.org/plugins/wpide/), find "Collapsible Toggle Shortcode" in its snippet library and add it in one click; or create a new PHP snippet in WPIDE (or any code snippets plugin) and paste the code above. More snippets: https://wpide.com/library/