Collapsable Markdown Field in the Craft CP

[kaspar-allenbach]

The UI Markdown field is immensely helpful to provide info to Editors who don't work regularly in the control panel.
Adding a separate docs' website with all the info who is not going to be read anyway is pointless.

But these infos are getting longer and longer.

How about an option to collapse these fields?

In this example here, it is not necessary but if there are additional fields down below it would help a lot to make them collapsable

[wsydney76]

We have done something similar in an older project via Template UI elements using the details/summary html tags.

You can either hardcode the help text, output dynamic content by accessing the element variable, or pull in content from an entries section, if you want to make the text editable for users, or translatable.

{# _cp/book_author_guide.twig #}

{% embed '_cp/guide.twig' with {title: 'Book Author Guide', open: true} %}
    {% block content %}
        {% set bio = element.bio %}
        {% if bio|length < 100 %}
            <p style="color:red">
                The bio you entered is missing or a bit short...
            </p>
        {% endif %}

        <p><a class="go" href="https://example.com" target="_blank">The link</a></p>
        
        {% set guide = craft.entries.section('guide').slug('author-fields').one %}
        {% if guide %}
            {{ guide.body }}
        {% endif %}
        
    {% endblock %}
{% endembed %}

The embed:

{# _cp/guide.twig #}

<div class="markdown pane">
    <details {{ open is defined and open ? 'open' }}>
        <summary style="font-weight: bold; font-size:18px; cursor: pointer;">{{ title ?? 'Guide' }}</summary>
        <div style="padding-top: 12px;">
            {% block content %}{% endblock %}
        </div>
    </details>
</div>

[brandonkelly]

I’ve updated the Markdown field layout element to allow safe HTML, for Craft 6 (#19426).

So it will be possible to create that <details> disclosure HTML right within the Markdown element settings, without needing to create a dedicated Twig template for it.

(Unfortunately I couldn’t do it for Craft 5.x, because the Markdown library we’re using won’t parse Markdown nested within HTML elements.)

[brandonkelly]

6.0.0-alpha.17 is out with that change.