Title: Use in Widgets
Last modified: April 8, 2021

---

# Use in Widgets

 *  Resolved [veronicadyer](https://wordpress.org/support/users/veronicadyer/)
 * (@veronicadyer)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/use-in-widgets-2/)
 * Is there any way to correctly class and id divs to add a functional accordion
   in a widget area? (i.e. footer, sidebar). So far I can only get the accordion
   to function when created through Gutenberg (which makes sense as that’s what 
   it was developed for of course!). Would be excellent to be able to use this in
   widget areas too.

Viewing 2 replies - 1 through 2 (of 2 total)

 *  Thread Starter [veronicadyer](https://wordpress.org/support/users/veronicadyer/)
 * (@veronicadyer)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/use-in-widgets-2/#post-14295505)
 * Edit to add: I just realized I needed to download the official Gutenberg plugin
   and now my widget area uses blocks. Hurray! [https://wordpress.org/plugins/gutenberg/](https://wordpress.org/plugins/gutenberg/)
 * Unfortunately, this accordion block is not yet updated or adapted to be useable
   in the Gutenberg widget space. Still doesn’t work yet, but I hope for updates.
    -  This reply was modified 5 years, 1 month ago by [veronicadyer](https://wordpress.org/support/users/veronicadyer/).
 *  Plugin Author [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
 * (@philbuchanan)
 * [5 years, 1 month ago](https://wordpress.org/support/topic/use-in-widgets-2/#post-14299025)
 * You can use accordions outside the main editor, it just requires you to get the
   right HTML in the right places (this is also not an officially supported feature,
   so use are your own risk).
 * Something like this should work. Note the `12345` in 3 places below. You’ll need
   a unique id for each accordion item on the page.
 *     ```
       <div class="c-accordion__item js-accordion-item" data-initially-open="false" data-click-to-close="true" data-auto-close="true" data-scroll="false" data-scroll-offset="0">
       	<button id="at-12345" class="c-accordion__title c-accordion__title--button js-accordion-controller" aria-controls="ac-12345">
       		Accordion item title
       	</button>
       	<div id="ac-12345" class="c-accordion__content" style="display: none;">
       		Accordion item content.
       	</div>
       </div>
       ```
   

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Use in Widgets’ is closed to new replies.

 * ![](https://ps.w.org/accordion-blocks/assets/icon-256x256.png?rev=2198298)
 * [Accordion Blocks](https://wordpress.org/plugins/accordion-blocks/)
 * [Frequently Asked Questions](https://wordpress.org/plugins/accordion-blocks/#faq)
 * [Support Threads](https://wordpress.org/support/plugin/accordion-blocks/)
 * [Active Topics](https://wordpress.org/support/plugin/accordion-blocks/active/)
 * [Unresolved Topics](https://wordpress.org/support/plugin/accordion-blocks/unresolved/)
 * [Reviews](https://wordpress.org/support/plugin/accordion-blocks/reviews/)

 * 2 replies
 * 2 participants
 * Last reply from: [philbuchanan](https://wordpress.org/support/users/philbuchanan/)
 * Last activity: [5 years, 1 month ago](https://wordpress.org/support/topic/use-in-widgets-2/#post-14299025)
 * Status: resolved