Add/Remove UI Buttons

Authoring
,
1

I’m attempting to create a page which includes two buttons:

One is a button/link reading “Add,” which when clicked, changes a variable and also replaces the Add link with the word “Added,” to indicate that it’s been clicked and the variable has been changed.

I also want to have another link nearby reading “Remove,” which changes the aforementioned variable back to its original value and replaces the word “Added” with the interactive “Add” link.

I’ve tried various combinations of the click-replace, click-append, link, and live macros, but as I am an amateur programmer, any help would be appreciated.

2

The effect you’re describing isn’t as easy to achieve as you may expect, although there are a couple of ways you could achieve it.

The following example makes use of both Named and Hidden hooks combined with the (show:) and (hide:) macros to control what is shown at each phase of the effect, it also uses Collapsing whitespace markup to remove any unwanted line-breaks in the generated output. The (link-repeat:) macro is used because you want the “links” to be re-selectable.

(set: $variable to "value")

{
	|add>[
		(link-repeat: "Add")[
			(set: $variable to "other value")
			(hide: ?add)
			(show: ?added)
			(show: ?remove)
		]
	]
	|added)[Added]
}

|remove)[{
	(link-repeat: "Remove")[
		(set: $variable to "value")
		(hide: ?added)
		(show: ?add)
		(hide: ?remove)
	]
}]

To style the “links” as “buttons” you just need to assign the (button:) macro as the 2nd argument of each of the above (link-repeat:) macro calls.
eg.

(link-repeat: "Add", (button:))