Give Hide or show by clicking another element

Question

I have 4 topics, and I would like to display only what I clicked, and if another one is open close, I know how to do this with jquery, but I’m doing it in a way that I don’t think is the most "correct", I leave the code very extensive putting many restrictions and etc.

<a class="topico1">
<a class="topico2">
<a class="topico3">
<a class="topico4-exibir">

I would like to click on another topic it gain the display value and what is with this value currently lose it. I in this case would do a function on click, that by clicking on the class topico3, check if it has the sub class display, if it is removing the class sub class display from all others, and if it has not added and removed from all others, So in case I would do this same function for all classes, it takes a lot of time and code, could I do it in an easier way? I hope it didn’t get too complicated to understand.

Answer 1

You don’t need more than 4 lines to do this, add a common classname to the elements, and do this.

$(document).on('click','.topic',function(){
    $('.topic').removeClass('exibir');
    $(this).addClass('exibir');
});

Functional example in fiddle: https://jsfiddle.net/j5tof0rg/2/