Link to home
Start Free TrialLog in
Avatar of nicemanish
nicemanish

asked on

expand and collapse in javascript/jquery

I will be having a table as initial with expand and collapse.once i got the value from database suppose 3 then i have to create the 3
table as same the first table,but in the first table div id and anchor id is hard coded.how it will be change dynamically for next 2 or more table,so that every time i got the
different div id and anchor id to pass the parameter in toggle.

once the table has been created i need to take expand all table and collase all table funcnality.so individualy table will expand and collapse as well
all table will collapse and expand on click of all expand and all collapse

one table i made is hard coded.suppose if i got the value 3 from database
it will generate the 3 table same like as above.

1. here in code in toggle i am passing the div id which is "DIV3" and anchor id which is "A2"
How it will generate dynamically if the 3 table created.

2.if i take expand all and colaapse all
then all the 3 table should be expand and collapse

<script type="text/javascript">
    
      function toggle16(showHideDiv, switchImgTag) {

          var ele = document.getElementById(showHideDiv);
          var imageEle = document.getElementById(switchImgTag);
          if (ele.style.display == "block") {

              ele.style.display = "none";
              imageEle.innerHTML = '<img src="../../Content/Images/icon_expand.gif"  style="margin: 7px;">';
              imageEle.style.color = '#dbdbdb';
          }
          else {
              ele.style.display = "block";
              imageEle.innerHTML = '<img src="../../Content/Images/icon_nav_minimise.gif"  style="margin: 7px;">';
              imageEle.style.color = '#dbdbdb';
          }
      }

       

    </script>
  <table id="Table1" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 10px;">
                        <tr>
                            <td valign="top">
                              
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-bottom: solid 2px #cccccc">
                                            <tr>
                                                <td class="myTaskLeft" style="width: 8px">
                                                </td>
                                                <td class="myTaskTitle" style="width: 11px;">
                                                    <a class="expand" id="A2" href="javascript:toggle16('Div3', 'A2');">
                                                        <img src="../../Content/Images/icon_nav_minimise.gif" alt="-" /></a>
                                                </td>
                                                
                                            </tr>
                                        </table>
                                 
                                <div id="Div3" style="display: block;">
                                    <table width="100%" cellpadding="0" cellspacing="0" style="border: solid 1px #cccccc;">
                                        <tr>
                                            <td class="ssTh">
                                                Line Items
                                            </td>
                                        </tr>
                                    </table>
                                   
                                </div>
                            </td>
                        </tr>
                    </table>

Open in new window

expand.bmp
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Did you have a look at jQuery accordion ?
ASKER CERTIFIED SOLUTION
Avatar of Jagadishwor Dulal
Jagadishwor Dulal
Flag of Nepal image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of nicemanish
nicemanish

ASKER

Thanks