/    Sign up×
Community /Pin to ProfileBookmark

[RESOLVED] Help! How do you make a body text expand and collapse like that in Windows Update?

Copy linkTweet thisAlerts:
Oct 31.2006

hello to all! ? i hope someone could point me in the right direction with this situation i have. i want to create a web page with collapsing body texts like in windows update (see attached images). or the Jupitermedia adbox ont he right of this posting page. if this is DHTML, then please point me in the right resource. or, please post some solutions.

here are the parameters:

[list]

  • [*]

    cross-browser friendly


  • [*]

    no server dependencies


  • [*]

    possibility of image inclusions


    • [/list]

    i would appreciate some help comes my way. for contributing javascript authors, i would gladly include credits for you. ? [[email protected]]for long discussions, please email me[/EMAIL] .

    thanks and regards to all! ?

    [upl-file uuid=9f41a93e-b1bf-4a21-87d0-c4e46cfb6901 size=25kB]expanding text collapsed.jpg[/upl-file]

    [upl-file uuid=20ec81f3-408e-4e08-b390-ec70596b582a size=39kB]expanding text expanded.jpg[/upl-file]

    to post a comment
    HTML

    5 Comments(s) ↴

    Copy linkTweet thisAlerts:
    @noelcruzphauthorOct 31.2006 — thanks!! i agree it is the fastest way. ? but i wanted more of the style that has a "plus" sign alongside the title/subject of the line i want to have an expandable definition. would you know of a script that does just that?

    regards,

    noel
    Copy linkTweet thisAlerts:
    @noelcruzphauthorOct 31.2006 — oh, i also prefer that the user could collapse the definition by the same plus sign that turns into a "minus" sign ?

    any help would be appreciated. thanks!
    Copy linkTweet thisAlerts:
    @TheBearMayOct 31.2006 — It's actually largely the same from the coding standpoint:

    [code=html]
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    <head>
    <title>Collapse</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <script type="text/javascript">
    function disp(hId, iId){
    if(document.getElementById(iId).src.indexOf("minus.gif") > 0){
    hide(hId,iId);
    return true;
    }
    document.getElementById(hId).style.display="block";
    document.getElementById(iId).src="minus.gif";
    }

    function hide(hId, iId){
    document.getElementById(hId).style.display="none";
    document.getElementById(iId).src="plus.gif";
    }
    </script>
    </head>

    <body>
    <p><img src="plus.gif" onclick="disp('def1', this.id);" id="clsp1" />Click to see definition 1</p>
    <p style="display:none" id="def1">This is definition 1</p>
    <p><img src="plus.gif" onclick="disp('def2', this.id);" id="clsp2" />Click to see definition 2</p>
    <p style="display:none" id="def2">This is definition 2</p>
    </body>
    </html>[/code]
    Copy linkTweet thisAlerts:
    @noelcruzphauthorNov 02.2006 — i got it! hehe.. i missed the script in the head part. thanks! ?
    ×

    Success!

    Help @noelcruzph spread the word by sharing this article on Twitter...

    Tweet This
    Sign in
    Forgot password?
    Sign in with TwitchSign in with GithubCreate Account
    about: ({
    version: 0.1.9 — BETA 5.26,
    whats_new: community page,
    up_next: more Davinci•003 tasks,
    coming_soon: events calendar,
    social: @webDeveloperHQ
    });

    legal: ({
    terms: of use,
    privacy: policy
    });
    changelog: (
    version: 0.1.9,
    notes: added community page

    version: 0.1.8,
    notes: added Davinci•003

    version: 0.1.7,
    notes: upvote answers to bounties

    version: 0.1.6,
    notes: article editor refresh
    )...
    recent_tips: (
    tipper: @AriseFacilitySolutions09,
    tipped: article
    amount: 1000 SATS,

    tipper: @Yussuf4331,
    tipped: article
    amount: 1000 SATS,

    tipper: @darkwebsites540,
    tipped: article
    amount: 10 SATS,
    )...