const showInfo = document.getElementById("show-info");
const infoPanel = document.getElementById("info-panel");

showInfo.addEventListener("click", (e) => {
	infoPanel.classList.add("active");
	infoPanel.querySelector(".close").addEventListener("click", (e) => {
		infoPanel.classList.remove("active");
	});
});

const showTranscription = document.getElementById("show-transcription");
// declared previously in labels.js
// const transcriptionPanel = document.getElementById("transcription-panel");

showTranscription.addEventListener("click", (e) => {
	transcriptionPanel.classList.add("active");
	transcriptionPanel.querySelector(".close").addEventListener("click", (e) => {
		transcriptionPanel.classList.remove("active");
	});
});