= Problem
On the desktop, [[ https://en.wikipedia.org/wiki/Same-sex_marriage_in_Kentucky | Same-sex marriage in Kentucky ]] (and other US states) looks fine. [[ https://en.wikipedia.org/wiki/Template:Same-sex_unions | Template:Same-sex unions ]] runs down the right-hand side of the page, taking only about one-third of the width available for text (on my laptop at a size comfortable for my old eyes), and only its first section, //Marriage//, is expanded; the other three, //Civil unions and registered partnerships//, //Unregistered cohabitation//, and //See also//, are initially collapsed, with a "[Show]" button.
On my smartphone,* though, the template comes up fully expanded at almost the very top of the page, with only the title and the [[ https://en.wikipedia.org/wiki/Same-sex_marriage_in_Kentucky#/media/File:Same-sex_marriage_in_Kentucky_by_county,_August_2015.svg | lead graphic ]] above it. I have to scroll five full screens to reach the first line of text. Need I say how awkward this is? especially with the risk of tapping a link as I tap-scroll down.
%%%* Samsung Verizon Android Galaxy S-3, model SCH-I535, OS v4.4.2
%%%
== Infoboxes ==
On desktop, if an article has multiple infoboxes, we collapse each subsequent infobox after the first:
{F4596023}
We don't do this on mobile and it takes up a lot of space
https://en.m.wikipedia.org/wiki/California
= Plan
MinervaNeue should
# Load mediawiki.page.ready - this will also enable table sorting... (T49858)
/Users/jrobson/git/core/resources/src/mediawiki/page/ready.js
# Provide styling (see Design) for collapsing
= Design
Goal:
{F8517080}
Note: No need to change the default 'show' label
== Open questions
[] Can we reuse the black arrow icon or is there a new asset needed?
== Possible CSS
```
.mw-collapsible-toggle {
padding-top: 30px;
background: rgba(255,0,0,0.5);
position: absolute;
bottom: 0;
left: 0;
right: 0;
top: 40px;
}
.mw-collapsible-toggle a {
margin-top: -45px;
display: block;
}
.mw-collapsible-toggle span
{
visibility: hidden;
}
.mw-collapsible-toggle ~ * {
padding-bottom: 30px;
display: block;
}
.mw-collapsible tbody > :first-child {
display: inherit !important;
visibility: inherit;
height: auto;
}
.mw-collapsed tbody > * {
display: block !important;
visibility: hidden;
height: 0;
}
```