How to show and hide content areas with Perch CMS

Perch is a lightweight CMS that I've used quite a lot recently. You can build a website in the normal way and then assign areas or sections of HTML to the Perch system via templates (snippets of HTML containing Perch tags). Additionally, the admin control panel seems to be easily understood by clients. It all works great!

Even though Perch is a lightweight system, it can still be pretty powerful because you can share content areas between pages and also hide or show content quite easily. This is all explained in the Perch documentation but the ability to hide or show content areas is something that is a bit 'underplayed' (or perhaps I only discovered this after everybody else) so I thought I'd highlight it.

In order to hide/show content, you need to use the <perch:if> </perch:if> conditional tags (as explained here). Using an If condition in your Perch HTML templates gives you a much greater control over what happens on your page. I've used it to hide/show content by testing if a CSS class value exists. Please note, this is nothing to do with CSS and its display: none property/value but rather a server-side process via Perch. I just prefer to use a class because it gives me a hook for changing the styles later.

Here's an example Perch template I've used. Something similar was described here by Perch developer Drew McLellan.

<perch:if id="showhide" value="show">
<div class="<perch:content id="showhide" label="Show on site?" type="select" 
options="Show|show, Hide|hide" allowempty="false" />">
<!-- your content, Perch tags, eg textarea, go here -->
</div> 
</perch:if>

I'm using the Perch If conditional <perch:if id="showhide" value="show"> to test for a Perch content area with id = “showhide" and a value = “show".

Don't forget the closing </perch:if> tag

Then, my <div> class name is defined as a select box in the Perch admin using this section of the template

<perch:content id="showhide" label="Show on site?" type="select" options="Show|show, Hide|hide" allowempty="false" />

The option names (the first part of the name|value pair) define what your client sees in the admin and allowempty = “false" means that the select box value cannot be blank (empty). This means that the client just sees a select box with Show and Hide options in the Perch admin. Easy for them.

Effectively, you are changing the class name via Perch and testing for the value in your content template. If it doesn't match up, the content area isn't shown.

You could extend this by creating two or more areas to show/hide and by sharing these across pages, thus giving the client several different choices for what they want to display on their site.

As I said before, this is not new but it's a useful method that may be missed if you haven't read through the documentation – as sometime happens ;-)