This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
The text-link elements have z-index:1.
The onclick custom attribute value for rest-of-screen container and text-link elements is
document.getElementById(\"gp-1\").style.height = \"0px\";
document.getElementById(\"gp-2\").style.height = \"0px\";
document.getElementById(\"gp-3\").style.height = \"0px\";
One can therefore do this for just one text-link element, and duplicate for however many buttons one wants, and then for each group button change the onclick custom attribute for that id from \"0px\" to \"auto\".
To prevent group buttons jumping to the top of their own page, I made all their hrefs end in #! - the browser finds no such id to go to, and stays where it was on the page.
The box-holder containers have ids gp-1, gp-2, and gp-3 respectively
The box-holder class has overflow:hidden, a solid colour background, and z-index:1
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 1 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 2 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb
This is a Group 3 item with accompanying blurb