CSS/Pagination

Implementing pagination purely in CSS is possible and simpler than in JavaScript, although functionally limited compared to JavaScript. It uses the  selector and anchor links, where the default state of each page is being hidden. This gets overridden through  on the selected page. The window might scroll to the position of the page container. No page is selected initially.

As of 2022, browser support for  is wide.

Pages
  Page 1 | Page 2 | Page 3 | Page 4 | Page 5 

 Text of page 1 Text of page 2 	<div id="page_3>Text of page 3 <div id="page_4>Text of page 4 	<div id="page_5>Text of page 5

Toggle
If the goal is simple element toggling, the  selector can already fullfill the purpose.

In the  tag, the   parameter refers to the ID of the check box it corresponds to. The check box may be hidden, but the label remains functional.

Note that the HTML check box needs to be located above the content area.

HTML:

Style sheet:

<div class="toggle_content_area" style="border:1px dashed grey; padding:1em;"> This text can be toggled using the HTML and CSS code above.