Using forEach method to target each button independently and display it's corresponding "s-CodePudding

I got this code to work but it I got a bug. It is opening and closing all 12 elements collectively (".share-btn-container"). Trying to get it to target only the button clicked, and it's corresponding share-btn-container. I suspect it has something to do with the "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">&#xf1e0</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;
}

CodePudding user response：

You don't even need to use sharePanelOpen just pass reference of sharedContainer of corresponding button using it's index when you register click event for each button. Then in togglesharePanel() function just use toggle method of classList to add / remove 'share-btn-container-active' class

for example

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')
}

CodePudding user response：

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')
}