Skip to content

Grounded Wren
Demo Controls
Page Control (CSS)

Page Control (CSS) Demo

Page Control

Page 1 Page 2

Content 1

Content 2

Page Notes

This is a demonstration of a page control using only CSS! Using :has and :checked, we're able to dynamically change the contents of a container.

Files

Highlighted elements are part of the demonstration - open them to inspect!

Markup

pageControlDemo.html

Scripts

pageControlDemo.js

Styles

pageControl.css
pageControlDemo.css