Generate form with collapsible pannel

[raghucsjm]

I have a json file which contains different data, which is logically separated , so I need to group them in collapsible pannel.
Is there any solution for this.

And One more thing is that, can we create html with use defined id.

[peeyush12345]

<style> .collapsible { background-color: #f9f9f9; color: #444; cursor: pointer; padding: 18px; width: 100%; border: none; text-align: left; outline: none; font-size: 15px; transition: 0.4s; }

.active {
  background-color: #ccc;
}

.content {
  padding: 0 18px;
  display: none;
  overflow: hidden;
  background-color: #f9f9f9;
}

</style>

Group 1

Content of Group 1

Group 2

Content of Group 2

<script> var coll = document.getElementsByClassName("collapsible"); var i; for (i = 0; i < coll.length; i++) { coll[i].addEventListener("click", function() { this.classList.toggle("active"); var content = this.nextElementSibling; if (content.style.display === "block") { content.style.display = "none"; } else { content.style.display = "block"; } }); } </script>

[peeyush12345]

<style> /* Hide the default checkbox */ input[type="checkbox"] { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 16px; height: 16px; border: 1px solid #ccc; outline: none; transition: all 0.3s; }

/* Create custom checkbox design */
input[type="checkbox"]:before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background-color: #fff;
  border: 1px solid #ccc;
  transition: all 0.3s;
}

/* Apply custom checkbox style when checked */
input[type="checkbox"]:checked:before {
  background-color: #007bff;
}

</style> Option 1
Option 2
Option 3