Creating Collapsible Form Sections
Problem
You have a large form that takes up a lot of space. You only want to display sections of the form as they are needed.
Solution
Split the form into display blocks using div elements, and then change the block’s styling
to control the display of the form section. When the page is loaded, hide all of the form
blocks by changing the display value to none using JavaScript:
theformblock.setAttribute("style","display: none");
or:
theformblock.style.display="none";
To expand the section, change the display setting to block using setAttribute:
theformblock.setAttribute("style","block");
or set the value directly:
theformblock.style.display="block";
EXPLAIN
There are multiple ways you can prevent form elements from taking up page space. For
one, you can clip the element by setting the clipping area. Another approach is to resize
the element to zero height. The best approach, though, and the one most applications
use, is to employ a collapsible section.
A collapsible section is a form of widget—a set of elements, CSS, and JavaScript packaged
together and generally considered one object.
The typical implementation consists of
one element that acts as a label that is always displayed, another element that holds the
content, and all contained within a third, parent element.
The collapsible section may or may not be used with other collapsible sections to form
a higher level widget, the accordion.
The accordion widget is a grouping of collapsible
sections with an additional behavior: depending on preference, any number of collaps‐
ible sections can be expanded, or only one section can be expanded at a time.
To demonstrate how collapsible sections can be used with forms, shows a
form that’s split into two sections. Notice that each form block has an associated label
that expands the collapsed form section when clicked. When the label is clicked again,
the form section is collapsed again.
Collapsed form element
<!DOCTYPE html>
<head>
<title>Collapsed Form Elements</title>
<style>
.label
{
width: 400px;
margin: 10px 0 0 0;
padding: 10px;
background-color: #ccccff;
text-align: center;
border: 1px solid #ccccff;
}
.elements
{
border: 1px solid #ccccff;
padding: 10px;
border: 1px solid #ccccff;
width: 400px;
}
button
{
margin: 20px;
}
</style>
</head>
<body>
<form>
<div>
<div id="section1" class="label">
<p>Checkboxes</p>
</div>
<div id="section1b" class="elements">
<input type="checkbox" name="box1" /> - box one<br />
<input type="checkbox" name="box1" /> - box one<br />
<input type="checkbox" name="box1" /> - box one<br />
<input type="checkbox" name="box1" /> - box one<br />
<input type="checkbox" name="box1" /> - box one<br />
</div>
</div>
<div>
<div id="section2" class="label">
<p>Buttons</p>
</div>
<div class="elements">
<input type="radio" name="button1" /> - button one<br />
<input type="radio" name="button1" /> - button one<br />
<input type="radio" name="button1" /> - button one<br />
<input type="radio" name="button1" /> - button one<br />
<input type="radio" name="button1" /> - button one<br />
<button>Submit</button>
</div>
</div>
</form>
<script>
var elements = document.getElementsByTagName("div");
// collapse all sections
for (var i = 0; i < elements.length; i++) {
if (elements[i].className == "elements") {
elements[i].style.display="none";
} else if (elements[i].className == "label") {
elements[i].onclick=switchDisplay;
}
}
//collapse or expand depending on state
function switchDisplay() {
var parent = this.parentNode;
var target = parent.getElementsByTagName("div")[1];
if (target.style.display == "none") {
target.style.display="block";
} else {
target.style.display="none";
}
return false;
}
</script>
</body>
There are numerous ways you can map the click activity in one element by changing the display in another. I wrapped both the label and the content elements in a parent element. When you click on a label, the parent to the label element is accessed in JavaScript and its children returned as an HTML collection.
he second element’s display toggles—if the element’s display is none, it’s changed to block; if the display is block, it’s changed to none. In the example, notice that the form elements are displayed when the page loads, and only collapsed after the elements are loaded.
This is because the form elements are displayed by default if JavaScript is disabled.+
JavaScript or HTML5?
The example in this recipe uses JavaScript to collapse and display portions of a form.
HTML5 provides two elements, details and summary, that implement this effect
without any need for scripting.
When should you use one over the other? If you want to add sections into the page that
are displayed or hidden based on the user action, it’s just as simple to use the HTML5
elements. However, if you need special effects, or want to attach other behavior when
the page section is displayed or hidden, you need to stick with JavaScript.
Join Our Telegram Channel to Stay Updated
![Python Django Rest Framework Tutorial Part 2 [ DRF Separate Methods for Create,Update,Delete,List ]](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmzEs_nyQ4dNnsoznaIbD_ifI3F3STp4Sd2eNDmKINgxyMvwt9Kc_BJHKWfeudr23RMsloD5Bd3PCfyBG96OY-cVZBTZ8Npc_86fCHd7iCKVy8fjtk4Xxawvw8OuvM1PhJpq-hTR28XJE/s72-c/DJANGO-REST2.jpg)
No comments:
Post a Comment