MODX Community

Creating toggle sections in templates

Hi All,

I am looking for a simple way to be able to turn off sections within one of my page templates, and was hoping someone could give me some advice. Let me explain.

I have a template that has a section at the bottom of it for a customer quote, but not all the pages will include this section. I am looking to add a toggle into the page instance (backend) so that I can turn off the section when it is not being used. I currently am using a tv that adds a class to the element if I don’t want it to appear (display:none stylie).

If anyone could help me to find a way that the section is not included, instead of hiding it, when the toggle is selected it would be much appreciated.

Kind regards,

Dave

1 Like

I don’t see what’s wrong with what you’re doing now, but you could also do it with a simple snippet – something like this:

Create a Yes/No TV that signals whether the section should appear (let’s call it ShowQuote).

Put a Tag where the section should appear:

[[!ShowQuote]]

Put the quote section in a chunk called CustomerQuote.

Create a snippet called ShowQuote with this code:

$tv = $modx->resource->getTVValue('ShowQuote');
$output = "";

if (! empty($tv) {
     $output = $modx->getChunk('CustomerQuote');
}
return $output;

This would be the equivalent for the snippet code, It’s slightly more efficient because it’s only one line, but it’s more difficult to understand:

return $modx->resource->getTVValue('ShowQuote')? $modx->getChunk('CustomerQuote') : "";

Thanks for your help.

I am just trying to make sure that there is nothing being pulled in that would cause any issues with users using screen-reading software etc. that would still pick up the hidden code.

There might be a different way of doing this of course, but I thought this way would be cleaner.

Thanks again.

Rather than the snippet, a simple output filter will also work in this case. Assuming the TV is named ShowQuote and the actual quote is in a CustomerQuote chunk like Bob suggested, you can use something like this:

[[*ShowQuote:notempty=`[[$CustomerQuote]]`]]

Or with the mosquite syntax to make sure the chunk is not processed unless it has to be:

[[[[*ShowQuote:notempty=`$CustomerQuote`:default=`- hidden`]]]]

When you do it in this way or with Bob’s snippet, there will not be anything hidden in the page markup that screenreaders can pick up. I do think screen readers are good at ignoring things that are display: none;, too, but might as well take it out of the markup completely.

you could also just create different chunks for each status of your switch - TV.
For example named CustomerQuote_0 and CustomerQuote_1

and show them depending on the value of your TV with

[[$CustomerQuote_[[*ShowQote]]]]

or, if you have lots different blocks like that, have a look into modmores ContentBlocks - Extra

Thanks guys, you have been very helpful. Some of this will be useful in the future as well as helping me solve my issue. You’re both heroes.

Just for future reference, if anyone is looking to do the same, I did things slightly differently.

[[[[*ShowQuote:is=`Yes`:then=`$CustomerQuote`:else=`- hidden`]]]]

I am making the TV radio buttons with ‘Yes’ and ‘No’ (but you could use anything that outputs those options). With a little modification it should them allow for you to add other options in if you want to have a selection of different sections to choose from, but also have it hidden as well.

Thanks again.

1 Like

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.