JAVA SCRIPT - Creating Collapsible Form Sections - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript JAVA SCRIPT - Creating Collapsible Form Sections - Web Development and Design | Tutorial for Java, PHP, HTML, Javascript

Breaking

Post Top Ad

Post Top Ad

Saturday, December 29, 2018

JAVA SCRIPT - Creating Collapsible Form Sections

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. 

No comments:

Post a Comment

Post Top Ad