<div data-gallery id="slider">
	<!-- 	collection -->
	<h1>SLIDER</h1>
</div>
<div data-gallery id="thumbnails">
	<!-- 	collection -->
	<h1>THUMBNAILS</h1>
</div>
<div>
	<button id="sliderButton">slider</button>
	<button id="thumbnailsButton">gallery</button>
</div>

button {
	border: none;
	padding: 8px 24px;
	border-radius: 0.25rem;
	background: lightsalmon;
	text-transform: uppercase;
	letter-spacing: 0.1rem;
	cursor: pointer;
}

const slider = document.querySelector("#slider");
const thumbnails = document.querySelector("#thumbnails");
const sliderButton = document.querySelector("#sliderButton");
const galleryButton = document.querySelector("#thumbnailsButton");

// Initially hide the gallery
thumbnails.style.display = "none";

// Add event listeners to the buttons
sliderButton.addEventListener("click", () => {
	slider.style.display = "block";
	thumbnails.style.display = "none";
});

galleryButton.addEventListener("click", () => {
	slider.style.display = "none";
	thumbnails.style.display = "block";
});