Creating toggle sections in templates

[ndave84]

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

[bobray]

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') : "";

[ndave84]

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.

[markh]

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.

[bruno17]

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

[ndave84]

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.

[ndave84]

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.