Solved
How do I achieve the below filter scenario?
Actual scenario!
Now below is the code I have developed.
<sly data-sly-use.templates="core/wcm/components/commons/v1/templates.html"></sly>
<sly data-sly-call="${templates.placeholder @ isEmpty = wcmmode.edit}" />
<div data-sly-use.carousel="com.adobe.cq.wcm.core.components.models.Carousel"
data-panelcontainer="${wcmmode.edit && 'NWT Cards Grid Component'}" id="${carousel.id}" class="cmp-carousel"
role="group" aria-label="${carousel.accessibilityLabel}" aria-live="polite" aria-roledescription="carousel"
data-cmp-is="carousel" data-cmp-autoplay="${(wcmmode.edit || wcmmode.preview) ? '' : carousel.autoplay}"
data-cmp-delay="${carousel.delay}" data-cmp-autopause-disabled="${carousel.autopauseDisabled}"
data-cmp-data-layer="${carousel.data.json}"
data-placeholder-text="${wcmmode.edit && 'Please add component here' @ i18n}">
<div class="overlay-filters">
<div class="container">
<div class="row">
<div class="col-sm-12">
<div class="sec-main-headings text-start text-md-center">
<h6>${properties.title}</h6>
</div>
<div data-sly-list.ctaItem="${resource.getChildren}"
class="overlay-main-filters align-items-center d-md-flex justify-content-md-center">
<a data-sly-test="${ctaItem.name == 'ctaMultifield'}"
data-sly-repeat.item="${ctaItem.getChildren}" href="#"
class="btn btn-default ripple-effect">${item.ctaText}</a>
</div>
<div data-sly-test="${properties.checkboxFilterEnabled == 'true'}"
class="align-items-center d-md-flex justify-content-md-center overlay-sub-filters">
<div class="sec-paragraph dark text-start text-md-center">
<div class="p2">
${properties.shortDescription @ context='html'}
</div>
</div>
<div data-sly-list.overlayItem="${resource.getChildren}" class="d-md-flex">
<div data-sly-test="${overlayItem.name == 'filterCategory'}"
data-sly-repeat.item="${overlayItem.getChildren}" class="checkboxes-wrap ">
<input name="like_to_pay" type="radio" value="${item.categoryId}"
id="${item.categoryId}">
<label for="${item.categoryId}">${item.categoryName} </label>
</div>
</div>
</div>
<sly data-sly-list.overlayItem="${resource.getChildren}">
<sly data-sly-test="${overlayItem.name == 'filterCategory'}" data-sly-repeat.eachItem="${overlayItem.getChildren}">
<div class="${eachItem.categoryId} bill">
<div class="spacer spacer-36"></div>
<sly data-sly-list.item="${carousel.items}">
<sly data-sly-resource="${item.name @ decorationTagName='div'}">
</sly>
</sly>
</div>
</sly>
</sly>
</div>
</div>
</div>
</div>
<sly data-sly-resource="${resource.path @ resourceType='wcm/foundation/components/parsys/newpar',
appendPath='/*', decorationTagName='div', cssClassName='new section aem-Grid-newComponent'}"
data-sly-test="${wcmmode.edit || wcmmode.preview}">
</sly>
</div>
The problem is here in the below code
<sly data-sly-list.overlayItem="${resource.getChildren}">
<sly data-sly-test="${overlayItem.name == 'filterCategory'}" data-sly-repeat.eachItem="${overlayItem.getChildren}">
<div class="${eachItem.categoryId} bill">
<div class="spacer spacer-36"></div>
<sly data-sly-list.item="${carousel.items}">
<sly data-sly-resource="${item.name @ decorationTagName='div'}">
</sly>
</sly>
</div>
</sly>
</sly>
When I click each filter, it should show different modules. And the class also should change like <div class="monthly bill"> and <div class="total bill">
Please help me to achieve this. I really appreciate your help.