Add active class to active param

Hi there, I have read a bunch of the threads about adding an active class to the current “Tag” in a tagcloud. And so far none of it has worked…Any recommendation on how to add an active class class=“active” to this code?

<aside>
  <ul class="tags">
    <?php foreach($tags as $tag): ?>
    <li class="tag">
      <a href="<?= url($page->url(), ['params' => ['tag' => $tag]]) ?>">
        <?= html($tag) ?>
      </a>
    </li>
    <?php endforeach ?>
  </ul>
</aside>
<?php e($tag === param('tag'), 'class="active"', '')  ?>

Which line would that replace? Or where would it be added? Thanks for the quick reply!

Where you want to add the class… Could be on the li or the a tag. Since you li tag already has a class applied, you would have to adapt the code, if you want to add it there.

<li class="tag<?php e($tag === param('tag'), ' active', '')  ?>">
a href="<?= url($page->url(), ['params' => ['tag' => $tag]]) ?>" <?php e($tag === param('tag'), 'class="active"', '')  ?>><?= html($tag) ?></a>

YES! That works !

Got that working, but only thing is it’s adding an extra space on the right to “All” and “Group” but not on “Solo” for some reason.

Screen Shot 2020-07-22 at 6.18.08 PM

Not sure what you mean, from a screenshot we can’t really tell what’s wrong here?

Hi there, I successfully got active tag working. But now I am trying to figure out how to make it so that when you land on the page, “ALL” is already underline (has the class “active”). Currently the filters only receive the under (class “active”) when I click on them.

This is how it looks when you land on the page:

I’d like it to look like this when you land on the page:
Screen Shot 2020-08-19 at 6.20.30 PM

This is my code for the tags:

    <aside>
      <ul class="tags"><?php foreach($tags as $tag): ?>
        <li <?php e($tag === param('tag'), 'class="active"', '')  ?> ><a href="<?= url($page->url(), ['params' => ['tag' => $tag]]) ?>"><?= html($tag) ?></a></li><?php endforeach ?>
      </ul>
    </aside>

Where does All come from, is that one of the tags in $tags

Correct, the three tags I’m using are:
All, Solo, Group

And by default, all the shows are loaded, but I’d like it already to be highlighted even though technically, it’s not the filter “all”

Perhaps this isn’t the best way to use tags?
(I added “all” to every single show, so that when you click “all”, all shows will show up…if that makes sense.)
this is how I’m using it in the panel
Screen Shot 2020-08-19 at 6.41.35 PM

Ok, then you need an additional condition that checks if there is no param.

Errr, I don’t really know how to write js, what would that be?

You need PHP in this case :grinning:

<aside>
  <ul class="tags"><?php foreach($tags as $tag): ?>
    <li <?php echo $tag === param('tag') || is_null(param('tag')) ? 'class="active"' : '';  ?> ><a href="<?= url($page->url(), ['params' => ['tag' => $tag]]) ?>"><?= html($tag) ?></a></li><?php endforeach ?>
  </ul>
</aside>

Only thing is since I’ve added “All” and one other tag (either “Solo” or Group") to each item on that page, all the tags are now underlined at first with the code above. Do you recommend a better way to use the tags than assigning all with “all”? Or…hmmm.
Screen Shot 2020-08-20 at 11.48.58 AM

Oh, somehow the code wasn’t copied correctly:

<li <?php echo $tag === param('tag') || ($tag === 'all' && is_null(param('tag'))) ? 'class="active"' : '';  ?> ><a href="<?= url($page->url(), ['params' => ['tag' => $tag]]) ?>"><?= html($tag) ?></a></li>

PERFECT, resolved, thank you love this kirby forum!!