Jquery: как запретить отображение других элементов div, когда я нажимаю другую кнопку ⇐ Jquery

[Anonymous]

Итак, у меня есть сетка из 12 кнопок с набором из 12 элементов div. когда я нажимаю кнопку 1, появляется div 1! правильный. однако, когда я нажимаю кнопку 2, появляется div 2, отлично. Однако первая кнопка все еще существует. Как мне сделать так, чтобы при нажатии кнопки 2 div 1 не отображался, а div 2 отображался.
Ниже показано, что я пробовал: я думал о добавлении класса удаления в каждая функция щелчка для каждого элемента div, если это имеет смысл.

document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.clicktoshow').click(function(){
if($('.service-wrapper-box').hasClass('showclick')){
$('.service-wrapper-box').removeClass('showclick')
}else{
$('.service-wrapper-box').addClass('showclick')
}
});
});
jQuery(function($){
$('.clicktoshow2').click(function(){
if($('.service-wrapper-box2').hasClass('showclick2')){
$('.service-wrapper-box2').removeClass('showclick2')
}else{
$('.service-wrapper-box2').addClass('showclick2')
}
});
});
jQuery(function($){
$('.clicktoshow3').click(function(){
if($('.service-wrapper-box3').hasClass('showclick3')){
$('.service-wrapper-box3').removeClass('showclick3')
}else{
$('.service-wrapper-box3').addClass('showclick3')
}
});
});
jQuery(function($){
$('.clicktoshow4').click(function(){
if($('.service-wrapper-box4').hasClass('showclick4')){
$('.service-wrapper-box4').removeClass('showclick4')
}else{
$('.service-wrapper-box4').addClass('showclick4')
}
});
});
jQuery(function($){
$('.clicktoshow5').click(function(){
if($('.service-wrapper-box5').hasClass('showclick5')){
$('.service-wrapper-box5').removeClass('showclick5')
}else{
$('.service-wrapper-box5').addClass('showclick5')
}
});
});
jQuery(function($){
$('.clicktoshow6').click(function(){
if($('.service-wrapper-box6').hasClass('showclick6')){
$('.service-wrapper-box6').removeClass('showclick6')
}else{
$('.service-wrapper-box6').addClass('showclick6')
}
});
});
jQuery(function($){
$('.clicktoshow7').click(function(){
if($('.service-wrapper-box7').hasClass('showclick7')){
$('.service-wrapper-box7').removeClass('showclick7')
}else{
$('.service-wrapper-box7').addClass('showclick7')
}
});
});
jQuery(function($){
$('.clicktoshow8').click(function(){
if($('.service-wrapper-box8').hasClass('showclick8')){
$('.service-wrapper-box8').removeClass('showclick8')
}else{
$('.service-wrapper-box8').addClass('showclick8')
}
});
});
jQuery(function($){
$('.clicktoshow9').click(function(){
if($('.service-wrapper-box9').hasClass('showclick9')){
$('.service-wrapper-box9').removeClass('showclick9')
}else{
$('.service-wrapper-box9').addClass('showclick9')
}
});
});
jQuery(function($){
$('.clicktoshow0').click(function(){
if($('.service-wrapper-box0').hasClass('showclick0')){
$('.service-wrapper-box0').removeClass('showclick0')
}else{
$('.service-wrapper-box0').addClass('showclick0')
}
});
});
jQuery(function($){
$('.clicktoshow1').click(function(){
if($('.service-wrapper-box1').hasClass('showclick1')){
$('.service-wrapper-box1').removeClass('showclick1')
}else{
$('.service-wrapper-box1').addClass('showclick1')
}
});
});
jQuery(function($){
$('.clicktoshow10').click(function(){
if($('.service-wrapper-box10').hasClass('showclick10')){
$('.service-wrapper-box10').removeClass('showclick10')
}else{
$('.service-wrapper-box10').addClass('showclick10')
}
});
});
});



.clicktoshow, .clicktoshow2, .clicktoshow3, .clicktoshow4, .clicktoshow5, .clicktoshow6, .clicktoshow7, .clicktoshow8, .clicktoshow9, .clicktoshow0, .clicktoshow1, .clicktoshow10{
cursor: pointer;
}
.showclick, .showclick2, .showclick3, .showclick4, .showclick5, .showclick6, .showclick7, .showclick8, .showclick9, .showclick0, .showclick1, .showclick10{
display: flex !important;
}
.service-wrapper-box, .service-wrapper-box2, .service-wrapper-box3, .service-wrapper-box4, .service-wrapper-box5, .service-wrapper-box6, .service-wrapper-box7, .service-wrapper-box8, .service-wrapper-box9, .service-wrapper-box0, .service-wrapper-box1, .service-wrapper-box10{
display: none;
}


CLick to show
click to show




Подробнее здесь: https://stackoverflow.com/questions/782 ... rent-butto