Hide / Show Children On Click

Use JS to hide and show children elements on click

- Parent

Child 1
Child 2

Source Code

Copy
 1package snippets
 2
 3import (
 4	"github.com/maddalax/htmgo/framework/h"
 5	"github.com/maddalax/htmgo/framework/js"
 6)
 7
 8func JsHideChildrenOnClick(ctx *h.RequestContext) *h.Partial {
 9	text := h.Pf("- Parent")
10	return h.NewPartial(
11		h.Div(
12			text,
13			h.Class("cursor-pointer"),
14			h.Id("js-test"),
15			h.OnClick(
16				js.ToggleClassOnChildren("div", "hidden"),
17				js.EvalCommands(
18					text,
19					js.ToggleText("+ Parent", "- Parent"),
20				),
21			),
22			h.Div(
23				h.Class("ml-4"),
24				h.Text("Child 1"),
25			),
26			h.Div(
27				h.Class("ml-4"),
28				h.Text("Child 2"),
29			),
30		),
31	)
32}