JSFiddle - React, Tailwind, and code Playground

HTML

<div class="slider">
  <ul>
    <li id="S1">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x180" /></div>      
    </li>
    <li id="S2">
      <div class="txt"><p>First slogan</p></div>
      <div class="img"><img src="http://placehold.it/800x280" /></div>
    </li>
  </ul>
  <a href="#S1">1</a>
  <a href="#S2">2</a>
</div>

CSS

#S2{
    display:none;
}

JavaScript

$(document).ready(function(){
    $('a').click(function(e){
       var id = $(this).attr('href').split("#").pop();
       var li = $('.slider ul li');
        $('.slider ul li').each(function(key,v){
           //if  linked to li is hidden show it
           if($(this).is(':hidden') && id == $(this).attr('id')){
                $(this).slideDown(500);
            }
            //if it's alrready visible do nothing
            else if($(this).is(':visible') && id == $(this).attr('id')){
            }
            else{
                $(this).slideUp(500);
            }
        });
    });
});