Does your site run on Perch CMS? Hire me to help. Perch CMS Development

How to show and hide content areas with Perch CMS

Posted on by Clive Walker in Web Development Perch

I wrote this post a while back. The content can still be relevant but the information I've linked to may not be available.

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 -->

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 ;-)

Does your site run on Perch CMS? Hire me to help. Perch CMS Development


  • 05 Aug 2014 08:42:10

    Thanks for the code, works well. One thing that would be great for clients would be to display the content areas only when the select tag is set to true. Then the client would only see the input fields when they need them.

  • 05 Aug 2014 10:30:16

    @Andi: Thanks for your comment. I don’t know a way of doing that within the Perch admin but you could suggest that to the Perch developers.

  • Bill:

    07 Jun 2019 02:14:00

    Thanks for the Perch tip. Still useful in 2019!

Comments are OFF for this post.

© 2022 Clive Walker