Generate form with collapsible pannel
raghucsjm opened this issue · 2 comments
raghucsjm commented
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 commented
<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;
}
</style>
<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>
.active {
background-color: #ccc;
}
.content {
padding: 0 18px;
display: none;
overflow: hidden;
background-color: #f9f9f9;
}
Group 1
Content of Group 1
Group 2
Content of Group 2
peeyush12345 commented
<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;
}
</style>
Option 1
Option 2
Option 3
/* 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;
}
Option 2
Option 3