Fandom

Infobox Wikia

Getting the buttons you want on collapsible groups

224pages on
this wiki
Add New Page
Comment1 Share

By now, many of you probably know how to get a collapsible section in an infobox.

<group collapse=“closed”>
...  data ... 
</group>

Easy, right? Sure. But the thing is that you get default arrows to indicate collapsed and expanded states. And maybe that’s just not what you want. Maybe your community has grown strongly attached to the [less]/[more] buttons that come with the old CSS collapsible classes.

So how do you get ‘em back?

MorePortableInfobox

You can have your portable infoboxes -- and "more"

Well, first you have to realize that the arrows aren’t really arrows. They’re two sides of a bordered square that’s been rotated 45 degrees. Take another, hard look. See it?

Once you see that, you’re halfway to a solution!

Take a look at some of what’s going on at the Avatar Wiki:

.pi-collapse-closed .pi-header::after {
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   content:'[more]'!important;
   font-size:10px;
   color:#fff;
   border-color:transparent;
   border-width:0;
   width:35px;
   right:3px;
   top:40%;
}
.pi-collapse .pi-header:after {
   -webkit-transform: rotate(0deg);
   -moz-transform: rotate(0deg);
   -ms-transform: rotate(0deg);
   transform: rotate(0deg);
   color:#fff;
   content:'[hide]';
   font-size:10px;
   border-color:transparent;
   border-width:0;
   width:35px;
   right:3px;
   top:40%;
}

Rotate the arrow back to 0 degrees, make the border-color transparent, change the content to '[more]' for the collapse-closed state and '[hide]' for the plain collapsed state — and you’ll be almost there. But notice this little trick: you’ve also got to !important the [more] content on the closed state, or else the collapsed state of [hide] will always be present.

See also

Ad blocker interference detected!


Wikia is a free-to-use site that makes money from advertising. We have a modified experience for viewers using ad blockers

Wikia is not accessible if you’ve made further modifications. Remove the custom ad blocker rule(s) and the page will load as expected.