Hide / Show Children On Click
Use JS to hide and show children elements on click
- Parent
Child 1
Child 2
package snippets
import (
"github.com/maddalax/htmgo/framework/h"
"github.com/maddalax/htmgo/framework/js"
)
func JsHideChildrenOnClick(ctx *h.RequestContext) *h.Partial {
text := h.Pf("- Parent")
return h.NewPartial(
h.Div(
text,
h.Class("cursor-pointer"),
h.Id("js-test"),
h.OnClick(
js.ToggleClassOnChildren("div", "hidden"),
js.EvalCommands(
text,
js.ToggleText("+ Parent", "- Parent"),
),
),
h.Div(
h.Class("ml-4"),
h.Text("Child 1"),
),
h.Div(
h.Class("ml-4"),
h.Text("Child 2"),
),
),
)
}
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}