Greetings!

I am using a bootstrap powered client testimonial. The testimonial items require an active class to get displayed.

I am using a repeatable region to record multiple testimonials. Now there are two conditions:
1. If I keep the active class assigned to the testimonial, all testimonials are applied with the class and further more all testimonials get displayed together
2. If i remove the active class, no testimonial shows up (i checked the page source, the testimonials are there.

What I would want to accomplish is that, I would want to implement active class to only that testimonial which is being displayed. how can i create a condition, where i can apply active to only one testimonial and not all.

Regards,
GenXCoders

This is the link to the testimonial slider: Click Here

@KK sir...

A little help with this also please! The issue can be seen here: http://www.jadhaogin.com/demo/about.php

All the tabs are implemented with the active class and hence the tabs are highlighted and due to the active class being implemented, the data of all tabs are displayed at once.

Only one tab needs to be highlighted!

Regards,
Aashish

Ok this is what i did (as a workaround), to fulfill the thing:

HTML:

Code: Select all

<!-- Tabs -->
<div class="list-group">
     <a href="#" class="list-group-item text-center active">
          <img src="images/1.png" id="img_1" onError="this.onerror = '';this.style.visibility='hidden';">
     `     <br/>
     </a>
</div>

<!-- Tab Content -->
<div class="bhoechie-tab-content active">
    <h3 class="dotted-line"><cms:show ap_content_title /></h3>
    <p class="text-justify"><cms:show ap_content_desc /></p>
</div>

Couchified Code:

Code: Select all

<!-- Tabs -->
<div class="list-group">
    <cms:show_repeatable 'ap_content' start_count='1'>
        <cms:if k_count le '1'>
            <a href="#" class="list-group-item text-center active">
                <img src="<cms:show ap_content_image />" width='36px' height='36px' id="logo_img_<cms:show k_count />" onError="this.onerror = '';this.style.visibility='hidden';"><br/><cms:show ap_content_title />
            </a>
        </cms:if>
    </cms:show_repeatable>
                            
    <cms:show_repeatable 'ap_content' start_count='1'>
        <cms:if k_count gt '1'>
            <a href="#" class="list-group-item text-center">
                <img src="<cms:show ap_content_image />" width='36px' height='36px' id="logo_img_<cms:show k_count />" onError="this.onerror = '';this.style.visibility='hidden';"><br/><cms:show ap_content_title />
            </a>
        </cms:if>
     </cms:show_repeatable>
</div>

<!-- Tab Content -->
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab">
    <cms:show_repeatable 'ap_content' start_count='1'>
    <cms:if k_count le '1'>
        <div class="bhoechie-tab-content active">
            <h3 class="dotted-line"><cms:show ap_content_title /></h3>
            <p class="text-justify"><cms:show ap_content_desc /></p>
        </div>
    </cms:if>
    </cms:show_repeatable>
    <cms:show_repeatable 'ap_content' start_count='1'>
        <cms:if k_count gt '1'>
            <div class="bhoechie-tab-content">
                <h3 class="dotted-line"><cms:show ap_content_title /></h3>
                <p class="text-justify"><cms:show ap_content_desc /></p>
            </div>
        </cms:if>
    </cms:show_repeatable>
</div>

Something similar was done with Isotope Gallery (https://www.couchcms.com/forum/viewtopic.php?f=2&t=9068&view=next)

[KK]

Aashish, the use-case is to add 'active' class to the first elements in both lists.
It could be done using a single loop for each as follows -

Code: Select all

<!-- Tabs -->
<div class="list-group">
    <cms:show_repeatable 'ap_content' start_count='1'>
        <a href="#" class="list-group-item text-center <cms:if k_count='1'>active</cms:if>">
            <img src="<cms:show ap_content_image />" width='36px' height='36px' id="logo_img_<cms:show k_count />" onError="this.onerror = '';this.style.visibility='hidden';"><br/><cms:show ap_content_title />
        </a>
    </cms:show_repeatable>
</div>

<!-- Tab Content -->
<div class="col-lg-9 col-md-9 col-sm-9 col-xs-9 bhoechie-tab">
    <cms:show_repeatable 'ap_content' start_count='1'>
        <div class="bhoechie-tab-content <cms:if k_count='1'>active</cms:if>">
            <h3 class="dotted-line"><cms:show ap_content_title /></h3>
            <p class="text-justify"><cms:show ap_content_desc /></p>
        </div>
    </cms:show_repeatable>
</div>

Hope it helps.