Collapse, Classes, IDs and styling in sidebar widgets

Hello, admittedly I’m learning php and wordpress codex at the same time, but I’m very familiar with JS/jQuery, Bootstrap and use them in eCommerce projects with Liquid markup often. I’m looking for some better resources on the wordpress sidebar widgets - in particular, I want to add class .list-unstlyed to all dynamically generated ul (without using JS and without simply adding more app.less CSS… I know, the BS styling for .list-unstyled is only two lines - I’m fighting on principal - make this thing do what I want!)

As well now, I’m trying to turn widget lists into collapse elements and I’ve been trying to put data-target="#%1$s-collapse" into the widget title element in widget.php in the register_sidebar params - thinking this will generate a unique id reference to each collapse, but that variable doesn’t seem to translate… Is there a way to build '#' + variable +'"' like in JS?

Anyone have resources/links, or want to offer primer on either or both I’d greatly appreciate!

1 Like

I wanted to do a similar thing. So basically i want each widget inside the widget area collapse so you only see the title (user clickes on the title). So i coded up a jQuery script to do this for me.

I just uploaded all files to gist, there is allot of comments so you can get an understand on what’s happening, and yes i know am 4 years late :slight_smile:


  • Thanks this was helpful.
  • Sorry this was not helpful or what i was looking for.

0 voters

1 Like