Muitos de vocês provavelmente sabem como adicionar uma seção dobrável em uma infobox.
<group collapse=“closed”> ... data ... </group>
Fácil, né? Claro. Mas o problema é que você verá as setas padrão para indicar quando o grupo está aberto ou fechado. E talvez isso não seja o suficiente para você. Talvez a sua comunidade queira os botões de [menos]/[mais] que apareciam com as antigas classes de CSS.
Como você as traz de volta?
Você pode ter infoboxes portáteis -- e "mais"
Bem, primeiro você tem que perceber que as setas não são realmente setas. Elas são dois lados de um quadrado com bordas que foi girado 45 graus. Olhe de novo. Viu?
Depois que você percebe isso, a solução não fica distante!
Veja o que acontece na Avatar Wiki:
.pi-collapse-closed .pi-header::after {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
content:'[mais]'!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:'[menos]';
font-size:10px;
border-color:transparent;
border-width:0;
width:35px;
right:3px;
top:40%;
}
Vire a seta de volta para 0 (0deg), faça a cor da borda (border-color) transparente, mude o conteúdo de '[mais]' para em "collapse-closed" e '[menos]' em "collapsed" - e você está quase lá. Mas veja este pequeno truque: você também tem que adicionar !important para o conteúdo de [mais] em "collapse-closed" ou o estado "collapsed" de [menos] estará sempre presente.