Tengo este código para trabajar, pero tengo un error. Está abriendo y cerrando los 12 elementos colectivamente (".share-btn-container"). Tratando de hacer que apunte solo al botón en el que se hizo clic, y su contenedor share-btn correspondiente. Sospecho que tiene algo que ver con "let sharePanelOpen = true".
//HTML //12 of those divs, all sharing the "share-btns" class and "share-btn-container" class. <button id ="share-song1" class ="share-btns"><span class ="fa"></span></button> <div id ="share-container1" class ="share-btn-container"> <a href="#" id="facebookshare1" class ="facebook-btn"><i class ="fab fa-facebook"></i></a> <a href="#" id="whatsappshare1" class ="whatsapp-btn"><i class ="fab fa-whatsapp"></i></a> <a href="#" id="twittershare1" class ="twitter-btn"><i class ="fab fa-twitter"></i></a> <a href="#" id="linkedinshare1" class ="linkedin-btn"><i class ="fab fa-linkedin"></i></a> </div> //Javascript let sharePanelOpen = false; const shareButtons = document.querySelectorAll('.share-btns'); const shareContainers = document.querySelectorAll('.share-btn-container'); function openSharePanel () { shareContainers.forEach((container) => { console.log(container); sharePanelOpen = true; container.classList.add('share-btn-container-active'); }) shareButtons.forEach((button) => { button.classList.add('share-btns-active'); }) } function closeSharePanel () { shareContainers.forEach((container) => { sharePanelOpen = false; container.classList.remove('share-btn-container-active'); }) shareButtons.forEach((button) => { button.classList.remove('share-btns-active'); }) } shareButtons.forEach((button, i) => { button.addEventListener('click', () => { togglesharePanel(); }) }) function togglesharePanel() {sharePanelOpen ? closeSharePanel() : openSharePanel();} //CSS .share-btn-container { display: none; } .share-btn-container-active { display: flex; flex-direction: row; justify-content: space-around; align-content: center; position: absolute; top: 78px; left: 66px; background: rgb(30,10,40); border: 1px solid rgb(200,200,200); border-radius: 6%; width: 14.2rem; height: 7rem; padding: 0.5rem; box-shadow: 0 4px 8px rgba(0,0,0,0.3); z-index: 4; cursor: auto; }Ni siquiera necesita usar sharePanelOpen , simplemente pase la referencia de sharedContainer del botón correspondiente usando su índice cuando registre el evento de clic para cada botón. Luego, en la función togglesharePanel() , simplemente use el método de alternancia de classList para agregar / eliminar la clase 'share-btn-container-active'
por ejemplo
const shareButtons = document.querySelectorAll('.share-btns'); const shareContainers = document.querySelectorAll('.share-btn-container'); shareButtons.forEach((button, i) => { button.addEventListener('click', () => { togglesharePanel(shareContainers[i]); }) }) function togglesharePanel(shareContainersRef) { shareContainersRef.classList.toggle('share-btn-container-active') }const shareButtons = document.querySelectorAll('.share-btns'); const shareContainers = document.querySelectorAll('.share-btn-container'); shareButtons.forEach((button, i) => { button.addEventListener('click', () => { togglesharePanel(shareContainers[i]); toggleshareBtns(shareButtons[i]) }) }) function togglesharePanel(shareContainersRef) { shareContainersRef.classList.toggle('share-btn-container-active') console.log(shareContainersRef); } function toggleshareBtns(buttonref) { buttonref.classList.toggle('share-btns-active') }