johnmeehan/index.html

## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <link rel="stylesheet" href="main.css">
  <script src="bundle.js" async></script>
</head>
<body>
  <div data-controller="toggler">
    <label>Toggle Me</label>
    <input data-action="input->toggler#toggle" data-target="toggler.input" type="checkbox" id="someid" name="someid" checked>

    <div data-target="toggler.hideme" id="stuff_to_hide">
      <h1>
        Importand stuff to hide
      </h1>
    </div>

  </div>
</body>
</html>

## main.css
#stuff_to_hide {
  display: none;
}

## toggler_controller.js
import { Controller } from "stimulus"

export default class extends Controller {
  static targets = [ "input", "hideme" ];

  connect() {
    this.toggle();
  }

  toggle() {
    if (this.inputTarget.checked) {
      this.hidemeTarget.style.display = "block";
    } else {
      this.hidemeTarget.style.display = "none";
    }
  }

}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="main.css">
	<script src="bundle.js" async></script>
	</head>
	<body>
	<div data-controller="toggler">
	<label>Toggle Me</label>
	<input data-action="input->toggler#toggle" data-target="toggler.input" type="checkbox" id="someid" name="someid" checked>

	<div data-target="toggler.hideme" id="stuff_to_hide">
	<h1>
	Importand stuff to hide
	</h1>
	</div>

	</div>
	</body>
	</html>
	import { Controller } from "stimulus"

	export default class extends Controller {
	static targets = [ "input", "hideme" ];

	connect() {
	this.toggle();
	}

	toggle() {
	if (this.inputTarget.checked) {
	this.hidemeTarget.style.display = "block";
	} else {
	this.hidemeTarget.style.display = "none";
	}
	}

	}