expand and collapse in javascript/jquery

Posted on 2011-04-22
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 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 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 ( == "block") {

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


  <table id="Table1" width="100%" cellpadding="0" cellspacing="0" style="margin-top: 10px;">
                            <td valign="top">
                                        <table width="100%" cellpadding="0" cellspacing="0" border="0" style="border-bottom: solid 2px #cccccc">
                                                <td class="myTaskLeft" style="width: 8px">
                                                <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>
                                <div id="Div3" style="display: block;">
                                    <table width="100%" cellpadding="0" cellspacing="0" style="border: solid 1px #cccccc;">
                                            <td class="ssTh">
                                                Line Items

Open in new window

Question by:nicemanish
    LVL 75

    Expert Comment

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

    Accepted Solution


    Author Closing Comment


    Featured Post

    Better Security Awareness With Threat Intelligence

    See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

    Join & Write a Comment

    Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
    "In order to have an organized way for empathy mapping, we rely on a psychological model and trying to model it in a simple way, so we will split the board to three section for each persona and a scenario and try to see what those personas would Do,…
    The viewer will learn how to count occurrences of each item in an array.
    This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

    745 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

    Need Help in Real-Time?

    Connect with top rated Experts

    16 Experts available now in Live!

    Get 1:1 Help Now