Show different element if the the class has the class active

Question

#Summary I'm using a carousel as a navigation.

<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>


<div class="swiper-slide state2 ">STATE 2</div>


<p class="state1-content">state 1</p>


<p class="state2-content">state 2</p>

.state2-content {
  display:none;
}

<script>
  jQuery(".grad-nav .swiper-slide").addClass(function (i) {
    return 'state' + (i + 1)
 });
 if (jQuery(".state1").hasClass("swiper-slide-active")) {
   jQuery(".state1-content").fadeIn(300);
   jQuery(".state2-content").fadeOut(300);
 }

 if (jQuery(".state2").hasClass("swiper-slide-active")) {
    jQuery(".state2-content").fadeIn(300);
 jQuery(".state1-content").fadeOut(300);
 }
</script>

#Summary Please help me.

I would like to show other element if the class detects that it has class active.

Answer 1

Using if else condition is not a generic way for multiple elements.So, here is the code that works fine in your case:

CSS

<style>
    .state2-content {
         display:none;
    }
</style>

HTML

<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
<div class="swiper-slide state2">STATE 2</div>
<p class="state1-content">state 1</p>
<p class="-content">state 2</p>

Script

<script>
  $(document).ready(function() {
    $(".grad-nav .swiper-slide").addClass(function (index) {
      return 'state' + (index + 1);
    });

    $(".grad-nav .swiper-slide").on('click', function() {
      var activeState = $(this).attr('class').split(' ')[1];
      $(".grad-nav .state-content").fadeOut(300);
      $("." + activeState + "-content").fadeIn(300);
    });
  });
</script>

$(document).ready(function() {
    $(".grad-nav .swiper-slide").addClass(function (index) {
      return 'state' + (index + 1);
    });

    $(".grad-nav .swiper-slide").on('click', function() {
      var activeState = $(this).attr('class').split(' ')[1];
      $(".grad-nav .state-content").fadeOut(300);
      $("." + activeState + "-content").fadeIn(300);
    });
  });

.state2-content {
        display:none;
    }

<div class="swiper-slide state1 swiper-slide-active">STATE 1</div>
<div class="swiper-slide state2">STATE 2</div>
<p class="state1-content">state 1</p>
<p class="state2-content">state 2</p>


<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>