We are transitioning over to a new forum platform. Please post new issues there. Existing threads will be dealt with here unless you choose to move them over. Visit the new forum

Forum

Thread tagged as: Suggestions

Folding dividers and blocks

Not sure if this has been suggested...
Sometimes region fields and blocks can be very large and/or there can be many of them on a page. It would be great if the end user was able to click on a "divider-before" or a block section to have the contents fold up and away when not needed allowing the user to focus on the section he wants to edit.

Shawn North

Shawn North 0 points

  • 4 years ago
Rachel Andrew

Rachel Andrew 394 points
Perch Support

Yes that has been suggested several times for 2.9 so is on the list for consideration.

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!