Folding dividers and blocks

Great, thanks!

Shawn, we use jquery to collapse long sections, let me see if I can dig up the code tomorrow to share. It's just a simple UI tweek if I remember correctly.

R. K

This would be awesome, and it would be fantastic if fields could be dynamically shown/hidden depending on a checkbox or dropdown selection. Robert, I'd love to see that trick as well.

Shane, This is a simple example with a bit of content removed.

We added javascript (jquery) to file at /perch/addons/plugins/ui/_config.inc

<!-- make the SEO / Meta divider toggle ALL fields after it -->
<script>
    $(function() {

        $metaDivider = $('.divider:contains("SEO / Meta")');
        $endDivider = $('.divider:contains("MetaEnd")');

        if ($metaDivider.length && $endDivider.length) {
            $followingFields = $metaDivider.nextUntil($endDivider).add($endDivider);

            $endDivider.text(' ');
            $followingFields.hide();

            $metaDivider.css('cursor','pointer');
            $metaDivider.addClass('divider-toggle');
            $metaDivider.click(function(e) {
                e.preventDefault();
                $(this).toggleClass('open');
                $followingFields.slideToggle();
            });
        }

    });
</script>
<style>

    .divider-toggle {
        padding-left: 30px !important;
        position: relative;
    }
    .divider-toggle:hover {
        background: #eee;
    }
    .divider-toggle:before {
        content: '';
        border-style: solid;
        border-color: transparent transparent transparent #999;
        border-width: 5px 8px;
        width: 0;
        height: 0;
        position: absolute;
        left: 13px;
        top: 12px;
    }
    .divider-toggle.open:before {
        border-color: #999 transparent transparent transparent;
        border-width: 8px 5px;
        left: 12px;
        top: 14px;
    }

</style>
<!-- end SEO / Meta divider toggle code -->

then in our template where we wanted the folding we used attribute devider-before="" and devider-after="" to define our fold.

<perch:content order="99990" id="yourID" type="yourType" label="yourLabel" divider-before="SEO / Meta" />

<!--* LOTS OF FIELDS HERE *-->

<perch:content order="99997" id="yourID" type="yourType" label="yourLabel" divider-after="MetaEnd" />

Now when you are in the perch admin where the template is being used the divider-before label will be shown but will have an arrow indicating the section is folded, click and it will unfold.

None of the modifications will be affected by Perch Core updates and is fully compliant with how the designers of perch indicate how such UI changes should be performed.

Please let me know if I left something out... because I am human...lol :)

Hi Robert,

This works GREAT! Thank you for this, this really makes a big difference in with the editors experience.

Thanks Again!

Shawn North said:

Hi Robert,

This works GREAT! Thank you for this, this really makes a big difference in with the editors experience.

Thanks Again!

Your welcome. I am glad you got it working so quickly.

What a great idea, thanks Robert!

EDIT: This opens a whole world for Perch organization, really. Definitely going to experiment with jQuery .change() on checkboxes and select fields to see what's possible for showing/hiding unnecessary content fields. Thanks again for the great idea!