A field that toggles the visibility of other fields
After lots of threads and issues regarding this functionality and the obvious benefits, I decided to create it myself. I hesitated at first, since it was part of the Kirby 2.1 milestone and Daniel Rivers already reached out to Bastian with a solution last year. There must be a catch.
I desperately needed it for a project though, and everything seems to work fine, at least for my use cases. If there’s anything wrong, please add an issue on GitHub or comment on this thread. Thanks!
The field on GitHub: https://github.com/medienbaecker/kirby-fieldtoggle
In this very simple example we’re toggling the visibility of a single field.
We can use whatever number of options we want. For this example we’ll stick with
no, though. Setting the options works exactly as it would with a regular radio field.
In the additional
hide lists, we can show or hide fields for any of the defined options. In this case we want to show the field
yes is active and hide it when
no is active.
imagetoggle: label: Show image? type: fieldtoggle options: yes: "Yes" no: "No" show: yes: imagefield hide: no: imagefield imagefield: label: Image type: image
Full day events
This use case is a little more complex, but also more reasonable.
This time we’ll do the exact same thing, but show or hide multiple fields at the same time. When
Multiple days is activated, both
end are shown. When
Single day is activated, only
day is visible and
end are hidden.
eventtype: label: Event type type: fieldtoggle options: multidays: Multiple days singleday: Single day show: multidays: start end singleday: day hide: multidays: day singleday: start end day: label: Day type: date start: label: First day type: date width: 1/2 end: label: Last day type: date width: 1/2
The value of the
multidays field is still available, so you can use an
if/else condition in your template and display different things like you would with a regular
<? if($page->eventtype() == "multidays"): ?> // Code for event lasting multiple days <? else: ?> // Code for event on a single day <? endif ?>
A fieldtoggle in a structure field
fieldtoggle field works in structure fields, too.
This time, we’ll have a lot of options to choose from. Depending on the category of the product, fields will be shown or hidden. Just have a look at the blueprint yourself. It may be a bit longer, but it’s pretty self explanatory:
products: label: Products type: structure modalsize: large fields: name: label: Product name type: text width: 1/2 price: label: Price type: text icon: euro width: 1/2 category: label: Category type: fieldtoggle options: digital: Digital good animal: Animal subscription: Subscription service: Service coupon: Coupon food: Food show: digital: filesize animal: species diet subscription: start end service: date employee food: bestbefore hide: digital: shipping species diet start end date employee bestbefore animal: filesize start end date employee bestbefore subscription: shipping filesize species diet date employee bestbefore service: shipping filesize species diet start end employee bestbefore food: shipping filesize species diet start end date shipping: label: Shipping cost type: text icon: euro filesize: label: Filesize type: text icon: download species: label: Species type: select icon: paw options: - Cat - Dog - Bird diet: label: Diet type: textarea icon: cutlery start: label: First day type: date width: 1/2 end: label: Last day type: date width: 1/2 date: label: Date type: date employee: label: Responsible Employee type: select options: - Lorena Ipsmann - Dolores Singh - Achmed al Consetecur - Ali Lipsing bestbefore: label: Best before type: date