CODEWITHSUNDEEP
modxmodx-revolution
Voletcat
Voletcat

Reputation: 49

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?

Upvotes: 0

Views: 147

Answers (2)

ezrarieben
ezrarieben

Reputation: 96

The simple way would be to generate your navigation using an extra such as pdoMenu (available in the pdoTools package).

Use the following snippet call: [[pdoMenu? &parents=`0` &level=`1`]]

That will generate a nav according to the default templates. The active li element will have the class .active so you can style it accordingly.

pdoTools also gives you a ton of other useful snippets which you can find here.

Upvotes: 2

Tony Klapatch
Tony Klapatch

Reputation: 38

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 )

Upvotes: 1

Related Questions