[TYPO3-templavoila] FCE - how to add extra css class to first item in record list only please?

[David Green]

Hi list friends,  :-)

I'm tying to make a TV flexible content element to turn record items 
into tabbed contents using the twtter bootstrap framework.

I'm almost finished, but stuck on one small detail. I've searched the 
lists and web for ages and found what I think is the right bit of the 
manuals, but don't understand it. Please would some kind person tell me 
where I'm going wrong?

I'm trying to make this output structure

   <div class="tab-content">
     <div class="tab-pane active" id="c1">...</div>
     <div class="tab-pane" id="c2">...</div>
     <div class="tab-pane" id="c3">...</div>
     <div class="tab-pane" id="c4">...</div>
   </div>

The Typoscript below works fine - except it won't add the extra css 
class "active" to the first element

20= RECORDS 
20.conf.tt_content.stdWrap.innerWrap.cObject.default.20.10.value=tab-pane
20.source.current = 1
20.tables = tt_content
20.stdWrap.outerWrap =  <div class="tab-content">|</div>

I think what's needed must be something like this below to add the extra 
css class, but every variation I've tried doesn't work

20= RECORDS
20.conf.tt_content.stdWrap.innerWrap.cObject.default.20.10.value=tab-pane
20.conf.tt_content.stdWrap.innerWrap.cObject.default.20.10 {
    noTrimWrap = || active|
    if.isTrue.data = REGISTER:tx_templavoila_pi1.sectionIsFirstItem
    }
20.source.current = 1
20.tables = tt_content
20.stdWrap.outerWrap =  <div class="tab-content">|</div>

Please can anyone suggest what I'm doing wrong?

Many thanks everyone
David Green