Skip to content
ui script for Perch CMS to enable dividers to initially be closed
Branch: master
Clone or download
Latest commit b695a66 Jan 27, 2018
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitattributes Initial commit Jan 22, 2018
LICENSE Initial commit Jan 22, 2018 Added the word cms Jan 27, 2018 Remarks changed, added thanks Jan 25, 2018

Perch CMS Auto-collapsable Dividers

This Addon for Perch CMS makes it possible for dividers to initially be collapsed. Normally field dividers in Perch templates are all open. This takes a lot of screenspace for fields that are not used that often.

Also you can add end-dividers. These end-dividers are then hidden in the admin interface. There purpose is to be able to define the end of a divider section. Normally a divider ranges from the divider to another divider or to the end of the template. With the invisible end-divider you can determine the complete range of a divider without adding unnecessary dividers in the user interface.

How to install

  1. Download Arrive.js from
  2. Add the files and arrive.min.js to /perch/addons/plugins/ui/
  3. Add some dividers (divider-before="collapse-start|My divider text") to your template. You can also use 'divider-after' and ="collapse-end", see example code.

How it works

The ui script looks for a keyword ('collapse-start') in the name of the divider. It inserts the standard Perch snippet to collapse the divider. It also looks for ('collapse-end') to make that divider element invisible.

Why using Arrive.js

The arrive.min.js is needed, because without it the script will not see the extra (div class="divider-collapsed") element that is added later into the page by Perch code.
I have also used a time-delay, but I think this is more stable. There also was a suggestion to make use of a custom Perch Event which adds the div.divider-collapsed with the code: $(window).on('Perch_Init_Editors', function(){
sadly I couldn't get this to work.


  • Check if the divider fields are initially filled and leave these areas visible instead of collapsing them.
  • Add a class so you can style these special dividers.

Thanks to

Robert Ketter and Shane Lenzen for pointing out the way to go about solving this.

Example use in your Perch template file

<!-- This is a Perch Template which resides in /perch/templates/content/<mytemplate>.html -->

<!-- start of code snippet, there can be perch fields before this -->
<perch:if exists ="alineaimage"> 
      style="max-width: 374px" 
      src  ="<perch:content id="alineaimage" type="image" 
                    label="Foto" divider-before="collapse-start|Optionele foto" />"        
      alt  ="<perch:content id="FotoOms" type="text" 
                    label="Foto Omschrijving" divider-after="collapse-end|Invisible End Divider "/>" 

<!-- other perch fields might follow -->
You can’t perform that action at this time.