Onclick, hover, and div toggle-CodePudding

I'm having issues getting this code to behave. My aim in the code below is to get the cards to have the cards turn over when the mouse hovers on them, and to remain so when clicked. If another card is clicked, the face-up card (if any exist) is flipped back to face down. All the while, clicking any cards toggles the appearance of the set of divs below. I can't get the cards to remain face-up, and I'm not sure why.

Not sure if I explained it well, but any assistance would be appreciated!

 var divs = ["Div1", "Div2", "Div3", "Div4"];
 var visibleDivId = null;

 function divVisibility(divId) {
   if (visibleDivId === divId) {
     visibleDivId = null;
   } else {
     visibleDivId = divId;
   }
   hideNonVisibleDivs();
 }

 function hideNonVisibleDivs() {
   var i, divId, div;
   for (i = 0; i < divs.length; i  ) {
     divId = divs[i];
     div = document.getElementById(divId);
     if (visibleDivId === divId) {
       div.style.display = "block";
     } else {
       div.style.display = "none";
     }
   }
 }

.buttons a {
  width: 15%;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.buttons .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.buttons a:hover .img-top {
  display: inline;
}

<div >
  <div >
    <a href="#" onclick="divVisibility('Div1'); return false;">
      <img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front">
    </a> |
    <a href="#" onclick="divVisibility('Div2'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front"></a> |
    <a href="#" onclick="divVisibility('Div3'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front"></a> |
    <a href="#" onclick="divVisibility('Div4'); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front"></a>
  </div>
  <div >
    <div id="Div1">I'm Div One</div>
    <div id="Div2" style="display: none;">I'm Div Two</div>
    <div id="Div3" style="display: none;">I'm Div Three</div>
    <div id="Div4" style="display: none;">I'm Div Four</div>
  </div>
</div>

CodePudding user response：

You will need to select active card to remain face up. Then hide inactive cards when they are not selected.

var divs = ["Div1", "Div2", "Div3", "Div4"];
 var visibleDivId = null;

 function divVisibility(divId, anchor) {
   if (visibleDivId === divId) {
     visibleDivId = null;
   } else {
     visibleDivId = divId;
   }
   
   let prevClass = anchor.className;
   let buttons = document.getElementById('buttons');
   for(let i = 0; i < buttons.children.length; i  ) {
       buttons.children[i].className = '';
   } 
   
   if(prevClass == '') {
       anchor.className = 'active';
   }
   else { 
       anchor.className = '';
   }
   hideNonVisibleDivs();
 }

 function hideNonVisibleDivs() {
   var i, divId, div;
   for (i = 0; i < divs.length; i  ) {
     divId = divs[i];
     div = document.getElementById(divId);
     div.className = '';
     if (visibleDivId === divId) {
       div.style.display = "block";
     } else {
       div.style.display = "none";
     }
   }
 }

.buttons a {
  width: 15%;
  height: 195px;
  position: relative;
  display: inline-block;
  margin: 10px;
}

.buttons .img-top {
  display: none;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 99;
}

.buttons a:hover .img-top {
  display: inline;
}

.buttons a.active .img-top {
   display: inline;
}

<div >
  <div  id="buttons">
    <a href="#" onclick="divVisibility('Div1', this); return false;">
      <img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front">
    </a> |
    <a href="#" onclick="divVisibility('Div2', this); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front"></a> |
    <a href="#" onclick="divVisibility('Div3', this); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front"></a> |
    <a href="#" onclick="divVisibility('Div4', this); return false;"><img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg" alt="Card Back"><img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg"  alt="Card Front"></a>
  </div>
  <div >
    <div id="Div1">I'm Div One</div>
    <div id="Div2" style="display: none;">I'm Div Two</div>
    <div id="Div3" style="display: none;">I'm Div Three</div>
    <div id="Div4" style="display: none;">I'm Div Four</div>
  </div>
</div>

CodePudding user response：

HTML

<div >
    <div >
      <a id="Btn1" onclick="divVisibility('Div1');"></a>
      <a id="Btn2" onclick="divVisibility('Div2');"></a>
      <a id="Btn3" onclick="divVisibility('Div3');"></a>
      <a id="Btn4" onclick="divVisibility('Div4');"></a>
    </div>
    <div >
      <div id="Div1"></div>
      <div id="Div2"></div>
      <div id="Div3"></div>
      <div id="Div4"></div>
    </div>
  </div>
</div>

JAVASCRIPT

function divVisibility(divName){
    let activeDiv = document.querySelector('.activeDiv');
    let showDiv = document.querySelector(`#${divName}`);
    if (activeDiv){
        activeDiv.innerHTML= '<img src="https://www.tutorialrepublic.com/examples/images/card-back.jpg">';
        activeDiv.classList.remove('activeDiv');
    }
    showDiv.classList.add('activeDiv');
    showDiv.innerHTML= '<img src="https://www.tutorialrepublic.com/examples/images/card-front.jpg">';
}

CSS

.buttons a{
    width: 15%;
    height: 195px;
    position: relative;
    display: inline-block;
    margin: 10px;
    content: url('https://www.tutorialrepublic.com/examples/images/card-back.jpg');
}
.inner_div div{
    width: 15%;
    height: 195px;
    position: relative;
    display: inline-block;
    margin: 10px;
}
.buttons a:hover{
    content: url('https://www.tutorialrepublic.com/examples/images/card-front.jpg');
}
.activeDiv{
    content: url('https://www.tutorialrepublic.com/examples/images/card-front.jpg');
}

I believe this will give you the functionality you are looking for.