Expand and collapse for the entire form

Expand and collapse for the entire form

i have a jsp with multiple sections. i have implemented expand and collapse for all the sections. now i want to do the same for the page itself. i mean, when the page gets loaded al the sections wil be in collapse mode. once i click on expand all, all the section should get expanded. simillarly for collapse all. how?

View Answers

November 24, 2010 at 5:45 PM

Hi Friend,

Try the following code:

<html>
<script>
function fun1(h) {
  var tbl = document.getElementById('div1');
  tbl.style.display = h;
}
function fun2(h) {
  var tbl = document.getElementById('div2');
  tbl.style.display = h;
}
function fun3(h) {
  var tbl = document.getElementById('div3');
  tbl.style.display = h;
}
function fun(h) {
  var tbl = document.getElementById('div');
  tbl.style.display = h;
}
</script>
<a href="javascript:fun('none')">Hide</a>

<a href="javascript:fun('block')">Expand</a>
<br><br><br><br><br><div id=div name=div style="overflow:hidden;display:none">
<a href="javascript:fun1('none')">Hide</a>

<a href="javascript:fun1('block')">Expand</a>
<div id=div1 name=div1 style="overflow:hidden;display:none">
<center><h2>Personal Details:</h2></center>
<form name="form" method="post" onsubmit="return validate();">
<center>
<table>
<tr><td>First Name:</td><td><input type="text" name="fname"></td></tr>
<tr><td>Last Name:</td><td><input type="text" name="lname"></td></tr>
<tr><td>Date Of Birth:</td><td><input type="text" name="dob"></td></tr>
<tr><td>Address:</td><td><input type="text" name="address"></td></tr>
<tr><td>Contact No:</td><td><input type="text" name="contact"></td></tr>
<tr><td>Email:</td><td><input type="text" name="email"></td></tr>
</table>
</div>
<br><br><br><br><br><a href="javascript:fun2('none')">Hide</a>

<a href="javascript:fun2('block')">Expand</a>
<div id=div2 name=div2 style="overflow:hidden;display:none">
<center><h2>Educational Details:</h2></center>
<center>
<table>
<tr><td>Highest Qualification(With University):</td><td><input type="text" name="qua1"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks1"></td></tr>
<tr><td>Second Highest Qualification(With University:</td><td><input type="text" name="qua2"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks2"></td></tr>
<tr><td>Intermediate(Mention Board):</td><td><input type="text" name="inter"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks3"></td></tr>
<tr><td>Highschool(Mention Board:</td><td><input type="text" name="hschool"></td></tr>
<tr><td>Marks:</td><td><input type="text" name="marks4"></td></tr>
</table>
</center>
</div>
<br><br><br><br><br><a href="javascript:fun3('none')">Hide</a>

<a href="javascript:fun3('block')">Expand</a>
<div id=div3 name=div3 style="overflow:hidden;display:none">

<center><h2>Project and Experience Details:</h2></center>
<center>
<table>
<tr><td>No of Projects done:</td><td><input type="text" name="projects"></td></tr>
<tr><td>Technologies Used:</td><td><input type="text" name="technologies"></td></tr>
<tr><td>Work Experience:</td><td><input type="text" name="experience"></td></tr>
</table>

</form>
</center>
</div>
</div>
</html>

Thanks









Related Tutorials/Questions & Answers:
Expand and collapse for the entire form
Expand and collapse for the entire form  i have a jsp with multiple sections. i have implemented expand and collapse for all the sections. now i want... the sections wil be in collapse mode. once i click on expand all, all the section
Expand / Collapse form div when click on button
Expand / Collapse form div when click on button  Hi, I have a form... formbox expand once the form gets higher? Thanks <div class="formbox...://fortwoplease.wufoo.com/forms/z7x3k7/" title="Squeeze Page" rel="nofollow">Fill out my Wufoo form
Advertisements
expand and collapse data in jsp
expand and collapse data in jsp   function fun1(h) { var tbl = document.getElementById('div1'); tbl.style.display = h;} function fun2(h...;/center> <form name="form" method="post" onsubmit="return validate();">
ModuleNotFoundError: No module named 'cmsplugin-collapse'
ModuleNotFoundError: No module named 'cmsplugin-collapse'  Hi, My... named 'cmsplugin-collapse' How to remove the ModuleNotFoundError: No module named 'cmsplugin-collapse' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'mdx_collapse'
ModuleNotFoundError: No module named 'mdx_collapse'  Hi, My Python... 'mdx_collapse' How to remove the ModuleNotFoundError: No module named 'mdx_collapse' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'cmsplugin-collapse'
ModuleNotFoundError: No module named 'cmsplugin-collapse'  Hi, My... named 'cmsplugin-collapse' How to remove the ModuleNotFoundError: No module named 'cmsplugin-collapse' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'expand'
ModuleNotFoundError: No module named 'expand'  Hi, My Python... 'expand' How to remove the ModuleNotFoundError: No module named 'expand'... to install padas library. You can install expand python with following command
ModuleNotFoundError: No module named 'sphinx-collapse-admonitions'
ModuleNotFoundError: No module named 'sphinx-collapse-admonitions'  ...: No module named 'sphinx-collapse-admonitions' How to remove the ModuleNotFoundError: No module named 'sphinx-collapse-admonitions' error? Thanks
ModuleNotFoundError: No module named 'sphinx-collapse-admonitions'
ModuleNotFoundError: No module named 'sphinx-collapse-admonitions'  ...: No module named 'sphinx-collapse-admonitions' How to remove the ModuleNotFoundError: No module named 'sphinx-collapse-admonitions' error? Thanks
ModuleNotFoundError: No module named 'django-collapse-whitespace-templatetag'
ModuleNotFoundError: No module named 'django-collapse-whitespace-templatetag...: ModuleNotFoundError: No module named 'django-collapse-whitespace-templatetag' How to remove the ModuleNotFoundError: No module named 'django-collapse-whitespace
Redirect Entire Frame
Redirect Entire Frame  Hello All:) I ve 2 frames in a html file. Say Header and Trailer. I ve a link to logout. When i click on logout.... Any one have idea how i can redirect the entire header and trailer? What i can do
email entire page javascript
email entire page javascript  How to email entire page in JavaScript without using OB?   ob_end_start(); // page content if(!empty($_GET['purpose']) && $_GET['purpose'] == "email") { $message = ob_get
ModuleNotFoundError: No module named 'genre-expand'
ModuleNotFoundError: No module named 'genre-expand'  Hi, My Python... 'genre-expand' How to remove the ModuleNotFoundError: No module named 'genre-expand' error? Thanks   Hi, In your python
ModuleNotFoundError: No module named 'ifsc-expand'
ModuleNotFoundError: No module named 'ifsc-expand'  Hi, My Python... 'ifsc-expand' How to remove the ModuleNotFoundError: No module named 'ifsc-expand' error? Thanks   Hi, In your python environment
expand the row out line
expand the row out line     ...;create out line for rows and columns. Finally we expand the row outline. ..., boolean collapse) This method is used to collapse the row with it value. You
form
form   Can I prevent a form from being submitted again
How to Collapse Dropdowns on mouseclick on scrollbar in Safari Browser using javascript
How to Collapse Dropdowns on mouseclick on scrollbar in Safari Browser using javascript  How to Collapse Dropdowns on mouseclick on scrollbar in Safari Browser using javascript
expand the column out line
expand the column out line   ... out line for rows and columns. Finally we expand the column outline.  Code... ,true): This method is used to collapse the column with it value. You can
SweetDEV RIA
SweetDEV RIA       SweetDEV RIA contains widgets such as with Datagrid, Combo multiselect, Virtual window, Calendar, Click to open, Expand/Collapse, Excel export, client /server
ModuleNotFoundError: No module named 'odoo8-addon-website-sale-collapse-categories'
ModuleNotFoundError: No module named 'odoo8-addon-website-sale-collapse...: ModuleNotFoundError: No module named 'odoo8-addon-website-sale-collapse-categories...-website-sale-collapse-categories' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'cp-expand-includes'
ModuleNotFoundError: No module named 'cp-expand-includes'  Hi, My... named 'cp-expand-includes' How to remove the ModuleNotFoundError: No module named 'cp-expand-includes' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'docker-compose-expand'
ModuleNotFoundError: No module named 'docker-compose-expand'  Hi...: No module named 'docker-compose-expand' How to remove the ModuleNotFoundError: No module named 'docker-compose-expand' error? Thanks   Hi
ModuleNotFoundError: No module named 'odoo10-addon-mail-full-expand'
ModuleNotFoundError: No module named 'odoo10-addon-mail-full-expand'  ...: No module named 'odoo10-addon-mail-full-expand' How to remove the ModuleNotFoundError: No module named 'odoo10-addon-mail-full-expand' error
ModuleNotFoundError: No module named 'odoo10-addon-mail-full-expand'
ModuleNotFoundError: No module named 'odoo10-addon-mail-full-expand'  ...: No module named 'odoo10-addon-mail-full-expand' How to remove the ModuleNotFoundError: No module named 'odoo10-addon-mail-full-expand' error
ModuleNotFoundError: No module named 'odoo11-addon-web-group-expand'
ModuleNotFoundError: No module named 'odoo11-addon-web-group-expand'  ...: No module named 'odoo11-addon-web-group-expand' How to remove the ModuleNotFoundError: No module named 'odoo11-addon-web-group-expand' error
ModuleNotFoundError: No module named 'odoo12-addon-mail-full-expand'
ModuleNotFoundError: No module named 'odoo12-addon-mail-full-expand'  ...: No module named 'odoo12-addon-mail-full-expand' How to remove the ModuleNotFoundError: No module named 'odoo12-addon-mail-full-expand' error
ModuleNotFoundError: No module named 'odoo8-addon-mail-full-expand'
ModuleNotFoundError: No module named 'odoo8-addon-mail-full-expand'  ...: No module named 'odoo8-addon-mail-full-expand' How to remove the ModuleNotFoundError: No module named 'odoo8-addon-mail-full-expand' error
ModuleNotFoundError: No module named 'odoo8-addon-web-group-expand'
ModuleNotFoundError: No module named 'odoo8-addon-web-group-expand'  ...: No module named 'odoo8-addon-web-group-expand' How to remove the ModuleNotFoundError: No module named 'odoo8-addon-web-group-expand' error
ModuleNotFoundError: No module named 'cp-expand-includes'
ModuleNotFoundError: No module named 'cp-expand-includes'  Hi, My... named 'cp-expand-includes' How to remove the ModuleNotFoundError: No module named 'cp-expand-includes' error? Thanks   Hi, In your
ModuleNotFoundError: No module named 'docker-compose-expand'
ModuleNotFoundError: No module named 'docker-compose-expand'  Hi...: No module named 'docker-compose-expand' How to remove the ModuleNotFoundError: No module named 'docker-compose-expand' error? Thanks   Hi
Version of com.esyfur>gradle-expand-props dependency
List of Version of com.esyfur>gradle-expand-props dependency
Multipage form
Multipage form  I have a multipage form in php with 2 pages wnhen i submit the form data from both the pages should go in database how should i pass teh data from 1st page to 2nd page and then put the entire form data in mysql
Create Expand Bar in SWT
Create Expand Bar in SWT       This section illustrates you how to create an Expand Bar. SWT provides an application of creating a Expand Bar using the classes ExpandBar
how to search a word on entire database? - SQL
how to search a word on entire database?  hi, I want to search a word into the entire database.. note: not from particular table.. using php and mysql. any way to find this? thanks in advance
How to Synchronize the Entire collection Frame Work?
How to Synchronize the Entire collection Frame Work?  How to Synchronize the Entire collection Frame Work?   I Think We must implement the Through Sub Interfaces of Collection Frame work
JQuery Collapse
Java read entire file into byte array
Java read entire file into byte array  Where is the example of Java read entire file into byte array on your website? Thanks   Hi, Its simple you can use insputStream.read(bytes); method of InputStream class. Read
Maven Dependency gradle-expand-props >> 0.1.23
You should include the dependency code given in this page to add Maven Dependency of com.esyfur >> gradle-expand-props version0.1.23 in your project
Maven Dependency gradle-expand-props >> 0.2.3
You should include the dependency code given in this page to add Maven Dependency of com.esyfur >> gradle-expand-props version0.2.3 in your project
Maven Dependency gradle-expand-props >> 0.2.4
You should include the dependency code given in this page to add Maven Dependency of com.esyfur >> gradle-expand-props version0.2.4 in your project
Maven Dependency gradle-expand-props >> 0.3.1
You should include the dependency code given in this page to add Maven Dependency of com.esyfur >> gradle-expand-props version0.3.1 in your project
Maven Dependency gradle-expand-props >> 0.3.2
You should include the dependency code given in this page to add Maven Dependency of com.esyfur >> gradle-expand-props version0.3.2 in your project
Maven Dependency gradle-expand-props >> 0.3.4
You should include the dependency code given in this page to add Maven Dependency of com.esyfur >> gradle-expand-props version0.3.4 in your project
Maven Repository/Dependency: com.esyfur | gradle-expand-props
Maven Repository/Dependency of Group ID com.esyfur and Artifact ID gradle-expand-props. Latest version of com.esyfur:gradle-expand-props dependencies. # Version Release Date 1
form validation
form validation  how the form validation is done in jsf form using javaScript
Entire Code for j2ee Application with struts and hibernate - Development process
Entire Code for j2ee Application with struts and hibernate  Hi friends can you give me sample code for Entire j2ee web application with struts and hibernate.I mean code for Dao, DaoImpl, HibernateDao ,HibernateDaoImpl, Dto
A LSI chip contains the entire CPU of computer except main memory is called
A LSI chip contains the entire CPU of computer except main memory is called  A LSI chip contains the entire CPU of computer except main memory is called? 1. Microprocessor 2. Hard Disk 3. Input Device 4. Output Device 5. All
Need to expand tree by passing Id thr URL. (not by clicking manually) - Java Server Faces Questions
uses "ajax" switch type, note that for collapse/expand operations it will be Ajax... Need to expand tree by passing Id thr URL. (not by clicking manually)  Sub: Need to expand tree by passing Id thr URL. Hi, Here i have
print a form of *
print a form of *   * *** ***** ******* ********* ******* ***** *** *   Post the format properly
Need to expand tree by passing Id thr URL. - Java Server Faces Questions
" switch type, note that for collapse/expand operations it will be Ajax request... Need to expand tree by passing Id thr URL.  Hi, Here i have... albums(with their checkboxes) will expand and show like a treenode. just look

Ads