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