Toggle button text for programming liveview exercise

Phoenix Forum Questions / Help
1

Hi everyone!
I’m reading the book “Programming Phoenix LiveView” and I can’t do an exercise with JS commands.
At one point, the book asks to create a live component that “[…] toggles a button showing either + expand or - contract, and then marks a corresponding div as hidden or visible.”
I had no particular problem in doing that. After that, the book asks to refactor the component to implement the component without round-tripping to the server, using JS command.

This is my partial solution.
Template:

<.button phx-click={toggle_visibility(@id)} >+ expand</.button>
<div id={@id}>
    <%= render_slot(@inner_block) %>
</div>

and this is the event handler:

defp toggle_visibility(js \\ %JS{}, id) do
		js
		|> JS.toggle(to: "##{id}")
end

My question is: how can I toggle the text of the button as required by the exercise?
Thanks!

2

Move the ˋJS.toggle ˋ into ˋphx-clickˋ

1 Like
3

Have a look at the examples here Bindings — Phoenix LiveView v0.20.14

4

Hi, I already looked at them. In fact, I used JS.toggle(to: "##{id}") to show or hide the content of the component, and it works!
What I cannot do, is change the text of the button, something that in javascript you can do with innerHTML or similar.
I can’t find a JS binding that replaces innerHTML.