I have a chunk of working jQuery code (seen below) but it’s very repetitive. How do I make it more simplified?
$('.card-loop2').addClass('d-none').removeClass('d-flex');
$('.card-loop3').addClass('d-none').removeClass('d-flex');
$('.card-loop4').addClass('d-none').removeClass('d-flex');
$('#newsUpdateLink').on( "click", function() {
$('.category-loop1.card-loop1').addClass('d-flex').removeClass('d-none');
$('.category-loop2.card-loop1').addClass('d-flex').removeClass('d-none');
$('.category-loop3.card-loop1').addClass('d-flex').removeClass('d-none');
$('.category-loop4.card-loop1').addClass('d-flex').removeClass('d-none');
$('.card-loop2').addClass('d-none').removeClass('d-flex');
$('.card-loop3').addClass('d-none').removeClass('d-flex');
$('.card-loop4').addClass('d-none').removeClass('d-flex');
} );
$('#categoryLink1').on( "click", function() {
$('.category-loop1.card-loop1').addClass('d-flex').removeClass('d-none');
$('.category-loop1.card-loop2').addClass('d-flex').removeClass('d-none');
$('.category-loop1.card-loop3').addClass('d-flex').removeClass('d-none');
$('.category-loop1.card-loop4').addClass('d-flex').removeClass('d-none');
$('.category-loop2').addClass('d-none').removeClass('d-flex');
$('.category-loop3').addClass('d-none').removeClass('d-flex');
$('.category-loop4').addClass('d-none').removeClass('d-flex');
} );
$('#categoryLink2').on( "click", function() {
$('.category-loop2.card-loop1').addClass('d-flex').removeClass('d-none');
$('.category-loop2.card-loop2').addClass('d-flex').removeClass('d-none');
$('.category-loop2.card-loop3').addClass('d-flex').removeClass('d-none');
$('.category-loop2.card-loop4').addClass('d-flex').removeClass('d-none');
$('.category-loop1').addClass('d-none').removeClass('d-flex');
$('.category-loop3').addClass('d-none').removeClass('d-flex');
$('.category-loop4').addClass('d-none').removeClass('d-flex');
} );
$('#categoryLink3').on( "click", function() {
$('.category-loop3.card-loop1').addClass('d-flex').removeClass('d-none');
$('.category-loop3.card-loop2').addClass('d-flex').removeClass('d-none');
$('.category-loop3.card-loop3').addClass('d-flex').removeClass('d-none');
$('.category-loop3.card-loop4').addClass('d-flex').removeClass('d-none');
$('.category-loop1').addClass('d-none').removeClass('d-flex');
$('.category-loop2').addClass('d-none').removeClass('d-flex');
$('.category-loop4').addClass('d-none').removeClass('d-flex');
} );
$('#categoryLink4').on( "click", function() {
$('.category-loop4.card-loop1').addClass('d-flex').removeClass('d-none');
$('.category-loop4.card-loop2').addClass('d-flex').removeClass('d-none');
$('.category-loop4.card-loop3').addClass('d-flex').removeClass('d-none');
$('.category-loop4.card-loop4').addClass('d-flex').removeClass('d-none');
$('.category-loop1').addClass('d-none').removeClass('d-flex');
$('.category-loop2').addClass('d-none').removeClass('d-flex');
$('.category-loop3').addClass('d-none').removeClass('d-flex');
} );
I’ve tried to do a for loop in jQuery but it did not work at all the way I was expecting.