Skip to content

Instantly share code, notes, and snippets.

@addisonhall

addisonhall/gpc-gb-team-overlay.js

Last active October 18, 2025 17:03
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save addisonhall/a09ca75f625d5d99c9aed943091ab419 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save addisonhall/a09ca75f625d5d99c9aed943091ab419 to your computer and use it in GitHub Desktop.
Download ZIP
View team member in overlay panel JavaScript used in this video: https://youtu.be/hAYdvppnJCE
Raw
gpc-gb-team-overlay.js
/**
* Show team bios in GB overlay panel.
*/
function doTeamInfoOverlay() {
// check for required elements
const teamButtons = document.querySelectorAll('[data-btn-team-name]');
const teamOverlay = document.getElementById('team-overlay');
const closeTeamOverlay = document.getElementById('close-team-overlay');
// if required elements aren't present, bail out
if (!teamButtons && !teamOverlay) return;
// get all hidden team member containers within the overlay (they're hidden by default)
const teamList = teamOverlay.querySelectorAll('.gb-loop-item.team');
// watch "close" button clicks and reset the attributes to re-hide all team in the overlay
closeTeamOverlay.addEventListener('click', function() {
teamList.forEach(function (item) {
item.classList.remove('show');
item.setAttribute('aria-hidden', 'true');
});
});
// watch team buttons and show in the overlay accordingly
teamButtons.forEach(function (btn) {
btn.addEventListener('click', function() {
let thisTeamName = this.dataset.btnTeamName;
let showThisMember = document.getElementById(thisTeamName);
showThisMember.classList.add('show');
showThisMember.removeAttribute('aria-hidden');
});
});
}
Raw
show-hide.css
/* --- team overlay --- */
#team-overlay .gb-loop-item.team {
display: none;
}
#team-overlay .gb-loop-item.team.show {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment