jQuery slider works but it's hard-code, how to make it dynamic

Question

I have a list with some list items ["web","crossplatform", etc]

And i have some divs with the same classes.

Example:

 <div class="web"></div>

What i did is that if "web" is clicked on the list than show div with the class "web" and hide all other divs but not the list.

I have made this and it works but it's all hard-code and i want it to make more dynamic.

Here is a link to my code: Link

html:

<div class="container">
    <ul class="list">
      <li class="list__item active">web</li>
      <li class="list__item">crossplatform</li>
      <li class="list__item">wearables</li>
      <li class="list__item">tv</li>
      <li class="list__item">tablet</li>
    </ul>
    <div class="slider">
        <div class="web">
        <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptatum alias exercitationem soluta, voluptatem, quod ratione dicta sequi quibusdam quam itaque veritatis similique, aspernatur id possimus quae suscipit animi aperiam?</p>
        </div>

        <div class="crossplatform">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>

        <div class="wearables">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>

      <div class="tv">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>
      <div class="tablet">
        <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
        </div>
</div>
</div>

css:

*{
    margin: 0;
    padding: 0;
  }
  .container{
    display: flex;
    justify-content: center;
  }
  .slider{
      position: absolute;
      top: 100px;
      width: 600px;
  }
  .list{
    top: 40px;
    position: relative;
    display: inline-flex;
    list-style: none;
    width: 400px;
  /*   background-color: #cacaca; */
    justify-content: space-between;
  }
  .list__item{
    position: relative;
    padding: 10px;
    cursor: pointer;
  }

  .list__item::before{
    content: " ";
    position: absolute;
    left: 0;
    bottom: 0;
    height: 2px;
    width: 100%;
    background-color: #00a4ff;
    transform: scale(0);
    transition: transform .35s;
  }

  .active.list__item::before{
    transform: scale(1);
  }
  .web{
      color: red;
  }

  .crossplatform{
      color: #0F5738;
  }

  .wearables{
      color: green;
  }
.tv{
  color: #68113F;
}
.tablet{
  color: #042037;
}
  .crossplatform,
  .wearables,
  .tablet,
  .tv{
    display: none;
  }

jquery:

  $(".list__item").click(function(){
        var link = $(this).text();  
        var activeList = $('li').hasClass("active");

      $(this).addClass('active');
      $(this).siblings('.list__item').removeClass('active');

        if(link === "web" && activeList){
          $(".web").delay(400).fadeIn('slow');
          $(".wearables").hide();
          $(".crossplatform").hide();
          $(".tv").hide();
          $(".web").hide();
          $(".tablet").hide();

        }else if(link === "crossplatform" && activeList){
          $(".crossplatform").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".wearables").hide();
          $(".tv").hide();
          $(".web").hide();
          $(".tablet").hide();

        }else if(link === "wearables" && activeList){
          $(".wearables").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".crossplatform").hide();
          $(".tv").hide();
          $(".web").hide();
          $(".tablet").hide();

        }else if(link === "tv" && activeList){
          $(".tv").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".crossplatform").hide();
          $(".wearables").hide();
          $(".tablet").hide();

        } else if(link === "tablet" && activeList){
          $(".tablet").delay(400).fadeIn('slow');
          $(".web").hide();
          $(".crossplatform").hide();
          $(".wearables").hide();
          $(".tv").hide();
        }
      })

Answer 1

You can hide all children of slider and then show the one by using the link variable in the class selector.

However because you probably don't want it to be depended on a text of a button so I added a data-content attribute to the li items so you can set the correct selector there. This way you can change the button text without breaking the code.

$(".list__item").click(function() {
  //retrieve the content data attribute instead of the button text so you can change the text without breaking code.
  var contentSelector = $(this).data('content');
  var activeList = $('li').hasClass("active");

  $(this).addClass('active');
  $(this).siblings('.list__item').removeClass('active');

  //Hide all children and then display the one belonging to the clicked button.
  $('.slider').children().hide();
  $(contentSelector).delay(400).fadeIn('slow');
})

* {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  justify-content: center;
}

.slider {
  position: absolute;
  top: 100px;
  width: 600px;
}

.list {
  top: 40px;
  position: relative;
  display: inline-flex;
  list-style: none;
  width: 400px;
  /*   background-color: #cacaca; */
  justify-content: space-between;
}

.list__item {
  position: relative;
  padding: 10px;
  cursor: pointer;
}

.list__item::before {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  height: 2px;
  width: 100%;
  background-color: #00a4ff;
  transform: scale(0);
  transition: transform .35s;
}

.active.list__item::before {
  transform: scale(1);
}

.web {
  color: red;
}

.crossplatform {
  color: #0F5738;
}

.wearables {
  color: green;
}

.tv {
  color: #68113F;
}

.tablet {
  color: #042037;
}

.crossplatform,
.wearables,
.tablet,
.tv {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <ul class="list">
    <!-- Added data-content attribute to use as a content selector -->
    <li class="list__item active" data-content=".web">web</li>
    <li class="list__item" data-content=".crossplatform">crossplatform</li>
    <li class="list__item" data-content=".wearables">wearables</li>
    <li class="list__item" data-content=".tv">tv</li>
    <li class="list__item" data-content=".tablet">tablet</li>
  </ul>

  <div class="slider">
    <div class="web">
      <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Odit voluptatum alias exercitationem soluta, voluptatem, quod ratione dicta sequi quibusdam quam itaque veritatis similique, aspernatur id possimus quae suscipit animi aperiam?</p>
    </div>

    <div class="crossplatform">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>

    <div class="wearables">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>

    <div class="tv">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>
    <div class="tablet">
      <p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Corporis, nemo voluptatibus dolor voluptate officiis iure quisquam? Quo omnis et eum adipisci inventore, porro laboriosam fugiat, quod recusandae ab, culpa accusamus?</p>
    </div>
  </div>
</div>

Answer 2

You could do something like this

const available_class_names = [
  'tablet',
  'web',
  'crossplatform',
  'wearables',
  'tv'
];

function showOnly(show_class_name) {
  available_class_names.forEach(function(class_name) {
    var elem = $('.' + class_name);

    if (!elem.length) {
      console.log('element does not exist');
      return;
    }

    if (class_name === show_class_name) {
      elem.delay(400).fadeIn('slow');
    } else {
      elem.hide();
    }
  });
}

You would then call showOnly(link) instead of going through all that if/else logic.

FYI: I first define the available class names and do not dynamically do it using the link variable because this is "safer". Imagine that the link variable can contain something the user has influence on, then he might be touching elements that you do not want him to touch.