We help IT Professionals succeed at work.

Check out our new AWS podcast with Certified Expert, Phil Phillips! Listen to "How to Execute a Seamless AWS Migration" on EE or on your favorite podcast platform. Listen Now

x

expand and collapse in javascript/jquery

Medium Priority
447 Views
Last Modified: 2012-06-27
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
Comment
Watch Question

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
Did you have a look at jQuery accordion ?
Senior Web Developer
CERTIFIED EXPERT
Commented:
Unlock this solution with a free trial preview.
(No credit card required)
Get Preview

Author

Commented:
Thanks
Unlock the solution to this question.
Thanks for using Experts Exchange.

Please provide your email to receive a free trial preview!

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.