Expand and collapse for the entire form

Ads

 
 

Share on Google+Share on Google+

Tanmay
Expand and collapse for the entire form
1 Answer(s)      7 years ago
Posted in : JSP-Servlet

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?

Ads
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


Ads









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();">
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
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
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
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
form
form   Can I prevent a form from being submitted again
Version of com.esyfur>gradle-expand-props dependency
List of Version of com.esyfur>gradle-expand-props dependency
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
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
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
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
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
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
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
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
form validation
form validation  how the form validation is done in jsf form using javaScript
How to extract the entire line with specific data from a Text in java?
How to extract the entire line with specific data from a Text in java?  Hi, i would like to extract data from text like the following one: [CODE] ........... 2011/01/12 The thread 001 title should clearly describe 2011/01/12
registration form
="center" border=0&gt; &lt;form name="f1" action="CreateUser..." style="width: 96%; border-collapse: collapse" cellpadding="0
print a form of *
print a form of *   * *** ***** ******* ********* ******* ***** *** *   Post the format properly

Ads

 
Advertisement null

Ads