works

.herb.yml

@@ -0,0 +1,21 @@
+version: 0.8.10
+files:
+  include:
+  - "**/*.html"
+  - "**/*.rhtml"
+  - "**/*.html.erb"
+  - "**/*.html+*.erb"
+  - "**/*.turbo_stream.erb"
+  exclude:
+  - node_modules/**/*
+  - vendor/bundle/**/*
+  - coverage/**/*
+
+linter:
+  enabled: true
+  rules: {}
+
+formatter:
+  enabled: true
+  indentWidth: 2
+  maxLineLength: 80

app/javascript/controllers/hidden_controller.js

@@ -0,0 +1,18 @@
+import { Controller } from "@hotwired/stimulus"
+
+// Connects to data-controller="hidden"
+export default class extends Controller {
+
+  static values = { toggler: String }
+
+  connect() {
+    const toggler = document.getElementById(this.togglerValue)
+    if (toggler == undefined) {
+      console.warn(`no toggler: <input type=checkbox id=${this.togglerValue}> missing!`)
+      return
+    }
+
+    this.element.hidden = !toggler.checked
+    toggler.addEventListener('change', () => { this.element.hidden = !toggler.checked })
+  }
+}

app/views/blog1/index.html.erb

@@ -1,4 +1,31 @@
-<div>
+<section>
   <h1 class="font-bold text-4xl">Blog1#index</h1>
+
   <p>Find me in app/views/blog1/index.html.erb</p>
+
+  <span>
+    <input type="checkbox" id="my-checkbox-1">
+    <label for="my-checkbox-1" class="p-5">Voir les validations</label>
+  </span>
+
+  <span>
+    <input type="checkbox" id="my-checkbox-2">
+    <label for="my-checkbox-2" class="p-5">Voir HelloWord</label>
+  </span>
+
+  <div data-controller="hidden" data-hidden-toggler-value="my-checkbox-1">
+    <ul>
+      <li>A</li>
+      <li>B</li>
+      <li>C</li>
+      <li>D</li>
+      <li>E</li>
+    </ul>
   </div>
+
+  <hr>
+
+  <div data-controller="hidden" data-hidden-toggler-value="my-checkbox-2">
+    Hello World
+  </div>
+</section>