toggling 3+ elements using OOP

Question

Please see my Codepen (I've left a note where the starting point is):

I've been able to achieve what I like in what feels like a very manual way.. Basically, I want the badges to follow the same behaviour as the reviews, for example:-

Delivery-badge is selected - has active class

Returns-badge and adjustments-badge - remove active class

When returns is selected, delivery and adjustments remove active class etc. (Essentially this behaviour but cleaner - https://gyazo.com/e31ffc01e0e4be0ceecc3b46fd89c7e7 )

Unfortunately I can't seem to get this behaviour using OOP:/.. I feel like it would be much cleaner if it's possible.. Sorry for my noobness and thank you for looking!

https://codepen.io/FarahU94/pen/VwdgLwz

`

<section class="review-block">
  <ul class="badges">
    <li><div class="delivery-badge badge">
      <i class="fa-solid fa-truck"></i>delivery</div></li>
    <li><div class="returns-badge badge">
      <i class="fa-solid fa-arrow-rotate-left"></i>returns</div>     </li>
    <li><div class="adjustments-badge badge">
      <i class="fa-solid fa-ring"></i>adjust</div>
     </li>
  </ul>

  <ul class="reviews">
    <li class="review">Review 1</li>
    <li class="review delivery">Review 2 - delivery</li>
    <li class="review delivery">Review 3 - delivery</li>
    <li class="review returns">Review 4 - returns</li>
    <li class="review adjustments">Review 5 - adjustments</li>
    <li class="review returns">Review 6 - returns</li>
    <li class="review adjustments">Review 7 - adjustments</li>
    <li class="review adjustments">Review 8 - adjustments</li>
    <li class="review">Review 9</li>
  </ul>

</section>
  

`

`

$(".badge").each(function () {
    $(this).on('click', function () {
        var classList = $(this).attr("class");
        const classIdentifier = classList.split('-')[0]
        if ($(this).hasClass('active')) {
            $(this).removeClass('active');
            $(".review").each(function () {
                if (!$(this).hasClass(classIdentifier)) {
                    $(this).fadeIn(200);
                }
            });
        } else {
          
  // Can only do this manually, am a little stuck and seems like a borky/old school way :(, feel free to help here and thank you !! >
          if($(this).hasClass('returns-badge'))  
          {           
            $('.returns-badge').addClass('active'),
            $('.delivery-badge').removeClass('active'),
            $('.adjustments-badge').removeClass('active');
          } else if($(this).hasClass('delivery-badge'))  
          {
            $(this).addClass('active'),
            $('.returns-badge').removeClass('active'),
            $('.adjustments-badge').removeClass('active');
          } else if($(this).hasClass('adjustments-badge'))  
          {
            $(this).addClass('active'),
            $('.returns-badge').removeClass('active'),
            $('.delivery-badge').removeClass('active');
          }         
// End of bork
            $(".review").each(function () {
                $(this).fadeOut(200);
                if ($(this).hasClass(classIdentifier)) {
                    $(this).fadeIn(200);
                }


            });
        };
    });
});

`

Answer 1

You can use a pattern, match that with the class of the object clicked. Then hide all .review and only show these related to your found pattern.

 const pattern = /(\w*-badge\w*)/gi;
 const result = ([...$(this).attr("class").match(pattern)] || [""])[0].replace("-badge","");
  
 $(".reviews .review").removeClass("active")
 $(".reviews .review."+result).addClass("active")

Demo

 $(".badge").each(function() { $(this).on('click', function() { var classList = $(this).attr("class"); const classIdentifier = classList.split('-')[0] if ($(this).hasClass('active')) { $(this).removeClass('active'); $(".review").each(function() { if (.$(this).hasClass(classIdentifier)) { $(this);fadeIn(200); } }); } else { const pattern = /(\w*-badge\w*)/gi. const result = ([...$(this).attr("class").match(pattern)] || [""])[0],replace("-badge";""). $(".reviews.review").removeClass("active") $(".reviews.review."+result).addClass("active") $(this),data('clicked'; true). $(".review").each(function() { $(this);fadeOut(200). if ($(this).hasClass(classIdentifier)) { $(this);fadeIn(200); } }); }; }); });

 body { font-family: calibri; padding: 2rem; } body.review-block { width: 390px; box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px; margin: auto; border: 1px solid linen; text-align: center; } body.review-block.badges { padding-inline-start: 0; } body.review-block.badges > li { display: inline-block; } body.review-block.badges.active { background-color: linen;important. } body.review-block.badges,delivery-badge. body.review-block.badges,returns-badge. body.review-block.badges:adjustments-badge { cursor; pointer: height; 50px: width; 50px: background-color; peachpuff: margin; 1rem: border-radius; 100px: color; palevioletred: padding; 1rem. } body.review-block:reviews { background-color; linen: display; flex: flex-direction; column: padding-inline-start; 0: margin-bottom; 0. } body.review-block:reviews li { list-style; none: border-top; 1px solid linen: padding; 1rem; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <body> <section class="review-block"> <ul class="badges"> <li> <div class="delivery-badge badge"> <i class="fa-solid fa-truck"></i>delivery</div> </li> <li> <div class="returns-badge badge"> <i class="fa-solid fa-arrow-rotate-left"></i>returns</div> </li> <li> <div class="adjustments-badge badge"> <i class="fa-solid fa-ring"></i>adjust</div> </li> </ul> <ul class="reviews"> <li class="review">Review 1</li> <li class="review delivery">Review 2 - delivery</li> <li class="review delivery">Review 3 - delivery</li> <li class="review returns">Review 4 - returns</li> <li class="review adjustments">Review 5 - adjustments</li> <li class="review returns">Review 6 - returns</li> <li class="review adjustments">Review 7 - adjustments</li> <li class="review adjustments">Review 8 - adjustments</li> <li class="review">Review 9</li> </ul> </section> </body>