collapsing and expanding data present in the div tag using javascript

[ramadeviirrigireddy]

Hi All,


I have two tables the top table displays the Name and one .gif file (- which is used for minimize).and the table below this is having data to be displayed.
When i click on this .gif(- which is used for minimize) i need to hide the data present in the second table.and then the .gif file must be changed to (+ which is used for maximize). when u click this the data should be present.Can anyone help me to write the code???I tried so many ways but i'm not able to get the output.I'm using myeclipse 6.0.

[gits]

hi ...

can you please post some example-code? that would make it easier to show you what to do exactly. generally you have to use the onclick-handler of your +/- image to catch the event and set the src of it according to your needs and then set the style.display of your 'content-table' to none or block ...

kind regards

[ramadeviirrigireddy]

Hi,

Here is the sample code:

<tr>
     <td id="ofReg1" class="ofGridWidth5Col1">
     <a name="content"></a>
     <div class="ofTable">
      <div class="ofAlt4BorderThick ofAltBorderColorB5">
       <div class="ofWrapper">
        <div class="ofDataDisplay">
         <table class="ofxexpcoll" summary="This table displays general background information for this bond." >
          <tr class="ofH3" onmouseover="geninfobgovr()" onmouseout="geninfobgout()">
           <td colspan="2" bgcolor="#f2f2f0" id="geninfo"><h3>General Information</h3><a href="javascript:collapse()" tabindex="2"><img 
 
src="images/button_collapse.gif" width="14" height="14" alt="Collapse the General Information section" id="btn_collapse" class="ofxCollapsexpand" 
 
style="display:inline"  /><span class="ofOffScreen">Collapse the General Information section.</span></a><a href="javascript:expand()" tabindex="3"><img 
 
src="images/button_expand.gif" id="btn_expand" width="14" height="14" alt="Expand the General Information section." class="ofxCollapsexpand" 
 
style="display:none" /><span class="ofOffScreen">Expand the General Information section.</span></a></td>
          </tr>
          </table>          
          <div id="geninfotabledata">
          <table summary="This table displays general background information for this bond.">
          <tr>
           <th scope="row">Use of Proceeds</th>
           <td>Private Higher<br />Education</td>
          </tr>
          <tr>
           <th scope="row">State</th>
           <td>Massachusetts</td>
          </tr>
          <tr>
           <th scope="row">Min. Investment Qty</th>
           <td>1000</td>
          </tr>
          <tr>
           <th scope="row">Incremental Investment Qty</th>
           <td>&ndash;&ndash;</td>
          </tr>
          <tr>
           <th scope="row">Original Size</th>
           <td>99,000,000,000</td>
          </tr>
          <tr>
           <th scope="row">Outstanding Size</th>
           <td>99,000,000,000</td>
          </tr>
          <tr>
           <th scope="row">Marginable</th>
           <td>Yes</td>
          </tr>
          <tr>
           <th scope="row">&nbsp;Original&nbsp;Issue&nbsp;Discount</th>
           <td>Long Term</td>
          </tr>
          <tr>
           <th scope="row">Delivery</th>
           <td>Book Entry</td>
          </tr>
          <tr>
           <th scope="row">Bank Qualified</th>
           <td>No</td>
          </tr>
          <tr>
           <th scope="row">Day Count Basis</th>
           <td>&ndash;&ndash;</td>
          </tr>
          <tr class="ofLastChild">
           <th scope="row">Pre-Refunded</th>
           <td>No</td>
          </tr>
         </table>
         </div>
        </div>
       </div>
      </div>
     </div>
 

[gits]

hi ...

thank you ;) ... so now replace your two calls to collapse() and expand() with toggle() and use the following function:

function toggle() {
    var t_container = document.getElementById('geninfotabledata');
    var is_hidden   = t_container.style.display == 'none';
 
    t_container.style.display = is_hidden ? 'block' : 'none';
 
    var img = document.getElementById('btn_collapse');
 
    img.src = is_hidden ? 'images/button_collapse.gif' : 'images/button_expand.gif';
}
 

that should do the job ...

kind regards