ipsTabs: _activeItem doesn't change

[Meddysong]

I'm trying to replicate IPS's approach with their blog. I'm most of the way there but the only problem is that ipsTab_activeItem always stays on the first tab; it doesn't update when a new tab becomes active.

Here's the code I'm currently working with:

{{$database = \IPS\cms\Databases::load( 40 );}}
{{$categories = \IPS\cms\Categories40::roots();}}
<div id="news" class="eab-site" data-controller="pages.front.fullwidth.main">
  <section class="hero ipsClearfix">
    <div class="hero__background"></div>
    <div class="container u-center-text u-center">
      <h1 class="hero__title green-bg"><span>{$database->_title}</span></h1>
      {{if $database->_description}}<p class="hero__strapline green-bg u-center"><span>{$database->_description}</span></p>{{endif}}
    </div>
  </section>
  <div class="ipsTabs ipsTabs_stretch ipsClearfix sNews__tabs" id="elNewsCats" data-ipstabbar="" data-ipstabbar-contentarea="#elNewsCatsDummyContent" data-ipstabbar-disablenav="true">
    <a href="#elNewsCats" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
	<ul role="tablist">
      <li role="presentation">
        <a href="/" class="ipsTabs_item ipsType_center ipsTabs_activeItem" role="tab" id="recent" aria-selected="true">Recent</a>
      </li>
      {{foreach $categories as $category}}
      <li>
        <a href="{$category->url()}" class="ipsTabs_item ipsType_center" role="tab" id="{$category->id}">{$category->_title}</a>
      </li>
      {{endforeach}}
    </ul>
  </div>
  <div id="elNewsCatsDummyContent" class="ipsHide">
  <div id="ipsTabs_elNewsCats_recent_panel" aria-hidden="false"></div>
  {{foreach $categories as $category}}
	  <div id="ipsTabs_elNewsCats_{$category->id}_panel"></div>
  {{endforeach}}
</div>
  {database="news"}
</div>

As you can see from the screenshot, I've selected a category called 'Charity' (its title appears below the tab bar) but the initial tab 'Recent' still has the class ipsTab_activeItem.

Is there something I've done wrong? I've emulated the code that IPS uses plus cross-referenced with the relevant Guide. (The code doesn't perfectly imitate the Guide but then neither does IPS's. When I tried coding it as the Guide set out, the problem still remained.)

Any thoughts?

[newbie LAC]

      <li role="presentation">
        <a href="/" class="ipsTabs_item ipsType_center ipsTabs_activeItem" role="tab" id="recent" aria-selected="true">Recent</a>
      </li>
      {{foreach $categories as $category}}
      <li>
        <a href="{$category->url()}" class="ipsTabs_item ipsType_center" role="tab" id="{$category->id}">{$category->_title}</a>
      </li>
      {{endforeach}}

You've setup ipsTabs_activeItem for 1st tab and ask why this doesn't work for other tabs 

Check category ID and add the class

[Meddysong]

Oh, I did that thinking some JS would remove it and apply it to the correct tab when required.

Anyway, I've removed it now and still have the same problem. In fact, to keep things simple, I've removed the 'Recent' tab because that wasn't a category.

What I'm left with now is:

{{$database = \IPS\cms\Databases::load( 40 );}}
{{$categories = \IPS\cms\Categories40::roots();}}
<div id="news" class="eab-site" data-controller="pages.front.fullwidth.main">
  <section class="hero ipsClearfix">
    <div class="hero__background"></div>
    <div class="container u-center-text u-center">
      <h1 class="hero__title green-bg"><span>{$database->_title}</span></h1>
      {{if $database->_description}}<p class="hero__strapline green-bg u-center"><span>{$database->_description}</span></p>{{endif}}
    </div>
  </section>
  <div class="ipsTabs ipsTabs_stretch ipsClearfix sNews__tabs" id="elNewsCats" data-ipstabbar="" data-ipstabbar-contentarea="#elNewsCatsDummyContent" data-ipstabbar-disablenav="true">
    <a href="#elNewsCats" data-action="expandTabs"><i class="fa fa-caret-down"></i></a>
	<ul role="tablist">
      {{foreach $categories as $category}}
      <li>
        <a href="{$category->url()}" class="ipsTabs_item ipsType_center" role="tab" id="{$category->id}">{$category->_title}</a>
      </li>
      {{endforeach}}
    </ul>
  </div>
  <div id="elNewsCatsDummyContent" class="ipsHide">
  <div id="ipsTabs_elNewsCats_recent_panel" aria-hidden="false"></div>
  {{foreach $categories as $category}}
	  <div id="ipsTabs_elNewsCats_{$category->id}_panel"></div>
  {{endforeach}}
</div>
  {database="news"}
</div>

And it's still not working:

Oh ... "Check category ID and add the class". Yeah, that could be why. Back in a minute!

[Meddysong]

11 minutes ago, Meddysong said:

"Check category ID and add the class". Yeah, that could be why. Back in a minute!

And now I've confused myself. I can get the category id easily enough: $category->id

And I know what I'm doing in principle: {{if $sthg = $category->id}ipsTab_activeTab{{endif}}

The something is the category id of the page being viewed. But how do I write that? (I'm currently writing within a Page. I suppose that the foreach loop should redirect to the database recordRow template. But the question remains: if $category is each category in the foreach loop, how do I identify the id of the current category?)

[newbie LAC]

{{if \IPS\cms\Databases\Dispatcher::i()->categoryId == $category->id}}ipsTabs_activeItem{{endif}}