How to show div when classes are added dynamically using jQuery

Question

I am working with Swiper.js slider.

When slide is active I want to add two divs below slide as description.

index.html

 <div class="swiper-container about">
  <div class="swiper-wrapper">
    <div class="swiper-slide about one">
      <div class="imgBx">
        <img src="one.jpg">
      </div>
      <div class="employee">
        <h3>Tom<br><span>Founder</span></h3>
      </div>
      <div class="employee-details-text">
        Description
      </div>

      <div class="employee-details-note">
        Description 2
      </div>
    </div>
    <div class="swiper-slide about two">
      <div class="imgBx">
        <img src="two.jpg">
      </div>
      <div class="employee">
        <h3>Ine<br><span>Founder and CEO</span></h3>
      </div>
      <div class="employee-details-text">
        Description
      </div>

      <div class="employee-details-note">
        Description 2
      </div>
    </div>
  </div>
</div>

When slide is active class swiper-slide-active is added

<div class="swiper-slide about one swiper-slide-active">

This is my code:

$(document).ready(function () {
  if($("div.swiper-slide.one").hasClass('swiper-slide-active')){
    $("employee-details-text, employee-details-note").show();
  }else{
    $("employee-details-text, employee-details-note").hide();
  }
});

I added one and two class to swiper-slide div so I can resolve slides.

With code that I have employee-details-note div is being showed all the time and employee-details-text is not being showed at all no meter if slide has class swiper-slide-active or not.

Answer 1

I think it is not necessary to use JS for what you want to do, here is a CSS code that can help you.

---

.swiper-slide .employee-details-text, .swiper-slide .employee-details-note{
    display:none;
    }
    .swiper-slide.swiper-slide-active .employee-details-text, .swiper-slide.swiper-slide-active .employee-details-note{
    display:block;
    }