How do I achieve the below filter scenario?

[Ameen_Dev]

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.

[Saravanan_Dharmaraj]

<divclass="${eachItem.categoryId=='Monthly'?'monthly':''} ${eachItem.categoryId=='Total'?'total':''} bill">

Is this what are you looking for ? What exactly the categoryId values stored in JCR? 

[Ameen_Dev · Accepted solution]

Actually, I achieved this scenario by adding parsys for each filter where I can add any modules to show under each filter. It was working as expected.