?
Solved

expand and collapse in javascript/jquery

Posted on 2011-04-22
3
Medium Priority
?
430 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
0
Comment
Question by:nicemanish
3 Comments
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 35451895
Did you have a look at jQuery accordion ?
0
 
LVL 15

Accepted Solution

by:
Jagadishwor Dulal earned 2000 total points
ID: 35465419
0
 

Author Closing Comment

by:nicemanish
ID: 35799673
Thanks
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Without even knowing it, most of us are using web applications on a daily basis.  In fact, Gmail and Yahoo email, Twitter, Facebook, and eBay are used by most of us daily—and they are web applications. We generally confuse these web applications to…
The first step to building an amazing About page is to figure out what you want the page to say about your company. You then must grab the attention of the reader, boast a bit, tell a story and let others brag about you. With a little bit of thought…
The viewer will learn how to count occurrences of each item in an array.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses
Course of the Month15 days, 19 hours left to enroll

850 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question