JSFiddle - React, Tailwind, and code Playground

by RoryMcCrossan

HTML

<button class="section-toggle" data-page="1">First Section</button>
<button class="section-toggle" data-page="2">Second Section</button>
<button class="hide-sections">Hide All Sections</button>

<section id="1" class="tabcontent">Section 1</section>
<section id="2" class="tabcontent">Section 2</section>

CSS

.tabcontent {
  display: none;
}

JavaScript

const sections = document.querySelectorAll('.tabcontent');

const showContent = id => {
	sections.forEach(section => section.style.display = section.id == id ? 'block' : 'none');
	localStorage.setItem('page', id);
}

// show on click
document.querySelectorAll('.section-toggle').forEach(button => {
	button.addEventListener('click', e => showContent(e.target.dataset.page));
});

// clear all on click
document.querySelector('.hide-sections').addEventListener('click', () => showContent());

// show on load
showContent(localStorage.getItem('page') || '');