# Collapsible Sidebar Widgets on Phones

> Folds sidebar and footer widgets into tap-to-open sections on small screens, so visitors reach the content and footer without scrolling past long widget lists.

- Type: HTML
- Runs: Site-wide footer
- Category: [Frontend & Design](https://wpide.com/library/category/frontend/)
- Tags: widgets, mobile, sidebar, accordion
- Author: WPIDE Team
- Installs: 0
- Updated: 2026-10-28
- Page: https://wpide.com/library/frontend-collapsible-widgets-mobile/

## Code

```html
<style>
.wpide-widget-toggle{display:flex;justify-content:space-between;align-items:center;width:100%;padding:.6em 0;border:0;border-bottom:1px solid rgba(0,0,0,.12);background:none;color:inherit;font:inherit;font-weight:700;text-align:left;cursor:pointer;}
.wpide-widget-toggle::after{content:"+";font-size:1.3em;line-height:1;}
.wpide-widget-toggle[aria-expanded="true"]::after{content:"\2212";}
.wpide-widget-body[hidden]{display:none;}
</style>
<script>
(function () {
    var breakpoint = 768;
    if (window.innerWidth >= breakpoint) { return; }
    document.querySelectorAll('.widget-area .widget, .sidebar .widget, .widget-area .wp-block-group').forEach(function (widget, i) {
        var title = widget.querySelector(':scope > .widget-title, :scope > .widgettitle, :scope > h2, :scope > .wp-block-heading');
        if (!title || widget.querySelector('.wpide-widget-toggle')) { return; }
        var body = document.createElement('div');
        body.className = 'wpide-widget-body';
        body.id = 'wpide-widget-body-' + i;
        body.hidden = true;
        while (title.nextSibling) { body.appendChild(title.nextSibling); }
        var btn = document.createElement('button');
        btn.type = 'button';
        btn.className = 'wpide-widget-toggle';
        btn.setAttribute('aria-expanded', 'false');
        btn.setAttribute('aria-controls', body.id);
        btn.textContent = title.textContent;
        btn.addEventListener('click', function () {
            var open = btn.getAttribute('aria-expanded') !== 'true';
            btn.setAttribute('aria-expanded', open ? 'true' : 'false');
            body.hidden = !open;
        });
        title.textContent = '';
        title.appendChild(btn);
        widget.appendChild(body);
    });
})();
</script>
```

## Notes

Works with widgets that have a title (classic widget titles or a Heading block as the first item). Change the breakpoint at the top of the script.

## How to use it

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