This question has been raised a few times in the Etch Circle community, and I thought I would create an article about it. The conditional solution is based on an answer provided by Zack Pyle.
The Revealer Alpha component is designed for a common content problem: sometimes a field contains just a short paragraph, and sometimes it contains a wall of text.
For short content, there is no reason to hide anything. But for longer content, collapsing the text behind a “Reveal More” button can make the page easier to scan.
That is where Etch’s conditional logic becomes really useful.
What the component does
Revealer Alpha wraps content in a fixed-height container, adds a fade-out at the bottom, and lets visitors expand or collapse the full content with a button.
The component includes props for:
- collapsed height
- closed button label
- open button label
- button aria label
- fade amount
The content itself is inserted through the revealerContent slot.
The problem
If we always wrap the field in the Revealer component, short content may look strange. A 100-character paragraph does not need a “Reveal More” button.
Instead, we only want to use the component when the content is long enough to benefit from it.
The conditional logic
In this example, the field is an ACF field: {this.acf.my_field}. Keep in mind, this could be native content value (excerpt, title, content, etc.), Meta Box, or another source.
We check the length of that field before deciding how to output it.
{#if this.acf.my_field.length().greater(300)}
<RevealerAlpha height="150px">
{#slot revealerContent}
{this.acf.my_field}
{/slot}
</RevealerAlpha>
{/if}
{#if this.acf.my_field.length().lessOrEqual(300)}
{this.acf.my_field}
{/if}The breakdown
The first condition says that if the field has more than 300 characters, Etch outputs the content inside the Revealer Alpha component.
{#if this.acf.my_field.length().greater(300)}The second condition says that if the field has 300 characters or fewer, Etch outputs the field normally.
So the visitor only sees the reveal interface when the content actually needs it.
{#if this.acf.my_field.length().lessOrEqual(300)}Why use two conditions?
This pattern creates two separate output paths:
- Long content gets wrapped in the Revealer component.
- Short content is displayed normally.
That keeps the component from adding unnecessary UI to simple content.
The slot
The Revealer Alpha component uses a slot named revealerContent.
This tells Etch where to place the field inside the component.
Without the slot, the component would render, but it would not know which content to reveal.
Adjusting the threshold
The number 300 is not special. It is just a useful starting point, and you can go up or down depending on your needs. The best number depends on the layout, font size, and content type.
Why is this useful?
This approach lets the content decide the layout.
Instead of creating separate templates for short and long content, Etch can check the field value and automatically choose the right output.
That makes the component more reusable, especially when working with dynamic fields from ACF, Meta Box, or other custom field tools.
Conditional logic is one of the most powerful parts of building with Etch. In this case, it turns Revealer Alpha from a simple show/hide component into a smarter content pattern that only appears when it improves the page.
Share Your Thoughts