Expand/Collapse DIVS

Discussion in 'Javascript' started by James Hurrell, Aug 21, 2003.

  1. Hi,

    I'm using the following javascript function to expand and collapse portions
    of text in a web page (targeted at IE5.5 and above):

    function doExpand(paraNum,arrowNum) {
    if (paraNum.style.display=="none") {
    paraNum.style.display="";
    arrowNum.src="collapse.gif";
    }
    else {
    paraNum.style.display="none";
    arrowNum.src="expand.gif";
    }
    }

    Implemented as follows:

    <p><a href="JavaScript:doExpand(exp1,ar1)"><img src="expand.gif" id="ar1"
    border="0" width="9" height="9"></a>
    Title Text</p>
    <div id="exp1" style="display: none" onclick="doExpand(exp1,ar1)">
    <p>Drop down text here</p>
    </div>

    And repeated when required in the same page after changing the paraNum and
    arrowNum parameters.

    Does anyone know how I could adapt the script to enable more than one set of
    DIVs to be expanded at the same time... i.e.: with a link that says "Show
    All" and when clicked, all collapsed text on the page is then exapnded...?

    Thanks in advance for any clues...

    James Hurrell
    --
    ..
     
    James Hurrell, Aug 21, 2003
    #1
    1. Advertising

  2. James Hurrell

    Fred Basset Guest

    function doExpandAll( objImage ) {
    var boolExpandAll = (objImage.src == 'expand.gif'); // Sets boolean
    to true when expand image is clicked
    for ( var intArg = 1; intArg < arguments.length; intArg++ ) { // Loop
    through all the arguments (ignoring first one, which is the image)
    var objDiv = arguments[intArg]; // Create a reference to each
    div object in turn
    objDiv.style.display = (boolExpandAll) ? 'block' : 'none'; // If
    expanding set to visible, else set to hidden
    }
    objImage.src = (boolExpandAll) ? 'collapse.gif' : 'expand.gif'; // If
    expanding set to collapse-image, else set to expand-image
    }

    <p><a href="JavaScript:doExpand(ar1,exp1,exp2,exp3)"><img
    src="expand.gif" id="ar1" border="0" width="9" height="9"></a> Title
    Text</p>
    <div id="exp1" style="display: none">
    <p>Drop down text here</p>
    </div>
    <div id="exp2" style="display: none">
    <p>Drop down text here</p>
    </div>
    <div id="exp3" style="display: none">
    <p>Drop down text here</p>
    </div>


    Fred Basset


    *** Sent via Developersdex http://www.developersdex.com ***
    Don't just participate in USENET...get rewarded for it!
     
    Fred Basset, Aug 21, 2003
    #2
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Vaclav Jedlicka

    datagrid and border-collapse:collapse style

    Vaclav Jedlicka, Jun 26, 2003, in forum: ASP .Net
    Replies:
    1
    Views:
    6,037
    Yan-Hong Huang[MSFT]
    Jun 30, 2003
  2. VVSRKS

    How can I avoid border-collapse:collapse to come ...

    VVSRKS, Sep 16, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    0
    Views:
    222
    VVSRKS
    Sep 16, 2004
  3. Mel

    expand & collapse with divs

    Mel, Mar 11, 2006, in forum: Javascript
    Replies:
    1
    Views:
    86
    Chameleon
    Mar 11, 2006
  4. sam
    Replies:
    2
    Views:
    180
    James Black
    May 22, 2006
  5. M.L.
    Replies:
    9
    Views:
    319
Loading...

Share This Page