Show and Hide Jquery

by keith9090

HTML

<ul class="aaa">
<li><a onclick="toggle1('mslider1');" id="btn_link1">01</a></li>
<li><a onclick="toggle1('mslider2');" id="btn_link2">02</a></li>
<li><a onclick="toggle1('mslider3');" id="btn_link3">03</a></li>
<li><a onclick="toggle1('mslider4');" id="btn_link4">04</a></li>
<li><a onclick="toggle1('mslider5');" id="btn_link5">05</a></li>
</ul>
<div class="ms-slider" id="mslider1">
<p>Slider 1</p>
</div>
<div class="ms-slider" id="mslider2">
<p>Slider 2</p>
</div>
<div class="ms-slider" id="mslider3">
<p>Slider 3</p>
</div>
<div class="ms-slider" id="mslider4">
<p>Slider 4</p>
</div>
<div class="ms-slider" id="mslider5">
<p>Slider 5</p>
</div>

CSS

.aaa{
    list-style-type:none;
    display:inline-flex;
}
.aaa li{
        padding-right:25px;
}

/* #mslider2,#mslider3,#mslider4,#mslider5{
  display:none;
} */
.ms-slider {
  display: none;
}

JavaScript

function toggle1(showDiv) {
  jQuery('.ms-slider').css('display', 'none');
  jQuery('#'+showDiv).css('display', 'block');
}