Search code examples
modxmodx-revolution

Set html class depending on showed content in ModX Revo

In my modx revo project I have list of links to articles, if I click on the link corresponding article will shown below. Those link can be styled, and that one which referring to displayed article needs to be styled difertly. So I need to add specific html class to that link, like

<div>
    <a class="link">1st article</a>
    <a class="link">1nd article</a>
    <a class="link active">3rd article</a> <!-- this one was selected -->
    <a class="link">4th article</a>
</div>
<article>
    <!-- 3rd article text goes here -->
</article>

Every article is modx resource content, and links list is part of template where it's opened. Is there a way I can do it?

Solution

  • The easiest way would be to use an extra such as Wayfinder to build your menu which automatically handles adding the "active" class based on what resource you are viewing.

    Here's a Wayfinder example from the docs, which gets 1 depth of pages under the root of the site and automatically adds the class "active" to the page you are viewing.

    [[Wayfinder? &startId=`0`&level=`1`]]

    By default, it outputs a unordered list of all items. This can then be customized to fit your site using the extra's parameters, specifically outerTpl and rowTpl (more info on the docs page for Wayfinder: https://docs.modx.com/extras/revo/wayfinder )