Hide show div with class based on data attribute using jquery

Hide show div with class based on data attribute using jquery

Links
<ul>
  <li><a data-ctg="ctg1" href="#">Category 1</a></li>
  <li><a data-ctg="ctg2" href="#">Category 2</a></li>
</ul>

Article
<div>
  <article class="ctg1">Category 1</article>
  <article class="ctg2">Category 2</article>
</div>

$(document).ready(function(){
  $('ul li a').click(function(event){
    let docId = $(this).attr("data-ctg");
    $('ul li a').parent().removeClass("active");
    $(this).parent().addClass("active");
    $('div article').hide();
    $(`div article.${docId}`).show();
    event.preventDefault();
  });
});