Karol Jankiewicz Karol Jankiewicz - 3 months ago 13
CSS Question

Switch between cards CSS+jQuery

I made a page with cards one, under next one. I have problem with adding class to active card, Look:

<div id="card" class="card"></div>
<div id="card2" class="card"></div>
<div id="card3" class="card"></div>
<div id="card4" class="card"></div>

// css:
.active{z-index:999}


// JS:
$('a').on('click tap', function(e){
e.preventDefault();
$('.card').removeClass('active');
$($(this).attr('href')).addClass('active');
});


When button is clicked jQuery firstly removes from all .card class "active" and after add .active to select element. Problem is with removing class from all divs.
I have animation between switching card.
This make situation when eg. I am on card 3 and clicked on card 4 first I'm see card one (because this is on top without .active) and after that see clicked card.
Someone can help me to solve that trouble?

Edit: Here a jsfiddle: https://jsfiddle.net/2z2v7wz6/

Answer

Try changing z-index of previous layer.

JS:

$('a').on('click tap', function(e){
  e.preventDefault();
  $('.card').css('z-index', '0');
  $('.card.active').css('z-index', '3');
  $('.card').removeClass('active');
  $($(this).attr('href')).addClass('active');
});

CSS:

.active{
  z-index:4 !important;
  animation:foo 2s ease 1;
}

Working Fiddle.