Theme

Story 91.5. UI Block – Toggle button

Written by

in

Content

General info

Objective:
Create a UI feature where the admin can insert a button into a post or page that, when clicked, will toggle the visibility of another specified element on the page (e.g., text, images, forms).

User story

As an admin,
I want to be able to add a button to any post or page,
So that I can allow users to click the button to show or hide specific content on the page.

As a user,
I want to be able to click a button on a post or page,
So that I can toggle the visibility of additional content

Visual design

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6682-5196&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6650-2599&m=dev

Acceptance criteria

01

Given: The admin is logged into the website’s backend

When: admin is editing a POST or PAGE.

Then: can add/ edit a UI element called “toggle button”

02

Given: the admin has inserted the Toggle button,

When: they select the button settings

Then: they can specify which element (e.g., text, image, form,etc.) the button will toggle AND if this element will be shown or hidden by default

Desk: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6682-5196&m=dev

Mob: https://www.figma.com/design/6KT0tZfJw3u7R8b5pCH8vw/Saclab-Team-Library?node-id=6650-2599&m=dev

Screen Recording 2024-09-12 at 12.13.49.mov

03

Given: the admin is setting up the Toggle button,

When: they define the button properties,

Then: they can customize the size, font, colour and alignment of:

  1. The text label (e.g “Show more”) for when the element is hidden

  2. The text label (e.g “Show less”) for when the element is shown

Screenshot 2024-09-12 at 11.01.04.png

Comments

Leave a Reply

More posts