CODEWITHSUNDEEP
javascriptjquery
fafchook
fafchook

Reputation: 819

Show hidden div after 5 selectors clicked

I'm using jQuery Flip plugin to flip 5 cards on click (just one direction), each has a unique ID.
I have a hidden div that I want to show after all 5 cards are clicked.
This is my code (for example i'm using just two cards/divs):

 <div id="card" class="card"> 
 <div class="front"> 
 <img src="images/front-500.png"/>
 </div> 
 <div class="back">
 <img src="images/back-1-500.png"/>
 </div> 
 </div>

 <div id="card2" class="card"> 
 <div class="front"> 
 <img src="images/front-500.png"/>
 </div> 
 <div class="back">
 <img src="images/back-1-500.png"/>
 </div> 
 </div>

 <div class="hidden">
 <h2> hidden content</h2>
 </div>

 <script>
 $( document ).ready(function() {
 // $("#card").flip(true);
 $("#card").flip({
      trigger: 'manual'
    });
 $("#card").click(function(){
      $("#card").flip(true);

    });
 $("#card2").flip({
      trigger: 'manual'
    });
 $("#card2").click(function(){
      $("#card2").flip(true);

    });
 </script>

Not sure on how to write the if all ID's clicked then show .hidden
Any help would be most appreciate.
Cheers

Upvotes: 0

Views: 91

Answers (2)

Grzegorz T.
Grzegorz T.

Reputation: 4123

Take a look at my solution. I hope that it will help. After clicking, I call the function that adds the class, and check how many clicks there are. If in this case there will be 2, I show the hidden div

$(function () {
  $("#card1").flip({
    trigger: 'manual'
  });
  $("#card1").click(function () {
    $("#card1").flip(true);
    checkLenght($(this));
  });
  $("#card2").flip({
    trigger: 'manual'
  });
  $("#card2").click(function () {
    $("#card2").flip(true);
    checkLenght($(this));
  });

  function checkLenght(thisObj) {
    thisObj.toggleClass('card-flip')
    let checkFive = document.querySelectorAll('.card-flip');
    if (checkFive.length >= 2) {
      const hiddenText = document.querySelector('#hidden-text'); hiddenText.removeAttribute('class')
    }
  }

});
body {
      margin: 0 100px;
    }

    .card {
      width: 100px;
      height: 100px;
      margin: 20px;
      display: inline-block;
    }

    .front,
    .back {
      border: 2px gray solid;
      padding: 10px;
    }

    .front {
      background-color: #ccc;
    }

    .back {
      background-color: red;
    }

    .hidden {
      display: none;
    }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jQuery-Flip/1.1.2/jquery.flip.js"></script>


<div id="card1" class="card">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="card2" class="card">
  <div class="front">
    <img src="https://fakeimg.pl/100/">
  </div>
  <div class="back">
    <img src="https://fakeimg.pl/100/">
  </div>
</div>

<div id="hidden-text" class="hidden">
  <h2> hidden content</h2>
</div>

Different solution

$(function () {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    $(`.${card.className}`).flip({ trigger: 'manual' })
    card.addEventListener('click', function () {
      $(this).flip(true);
      $(this).toggleClass('card-flip')
      let checkFive = document.querySelectorAll('.card-flip');
      if (checkFive.length >= 2) {
        const hiddenText = document.querySelector('#hidden-text'); hiddenText.removeAttribute('class')
      }
    })
  })
})

Next solution ;)

$(function () {
  const cards = document.querySelectorAll('.card');
  cards.forEach(card => {
    $(`.${card.className}`).flip({ trigger: 'manual' })
    card.addEventListener('click', function () {
     $(this).flip(true);
     $(this).toggleClass('card-flip')
     let checkFive = document.querySelectorAll('.card-flip');
     if (checkFive.length >= 5) {
       const hiddenText = document.querySelector('#hidden-text'); 
       hiddenText.removeAttribute('class')
       const winners = document.querySelectorAll('.winner');
       console.log(winners)
       winners.forEach(winner => {
       winner.classList.add('winner-border');
      })
     }
   })
  })
 })

Upvotes: 2

tstrand66
tstrand66

Reputation: 968

I have to assume that a new css class is added to the card when its flipped. just write a selector function for that class and check the length. ie 

    document.querySelectorAll('.flippedSelector').length >= 5 && showHiddenDiv();

Upvotes: 2

Related Questions