expand/collpase all instances of this script on a page

Discussion in 'Javascript' started by Randy Starkey, Aug 19, 2005.

  1. Hi,

    Can anyone point me in the right direction on this?

    Is there a way to expand and collapse all instances of this script on a
    single page? The script works well individually. I do the HTML header and
    then put buttons all over the page.

    Thanks!

    --Randy Starkey

    ---
    <script type="text/javascript">
    function getElement(id) {
    return document.getElementById ?
    document.getElementById(id) :
    document.all ?
    document.all[id] :
    null; // no need to fall back on Netscape here
    }

    function writeMoreButton(id) {
    document.write("<input class='moreButton' type='button' value='+'",
    " onclick='toggleMore(this,\"", id, "\");'>");
    }

    function toggleContent(id, visible) {
    var elem = getElement(id);
    (elem.style||elem).display = visible?"":"none";
    }

    function toggleMore(button,id) {
    var expand = (button.value=="+");
    toggleContent(id, expand);
    button.value = expand ? "-" : "+";
    }
    </script>

    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
    <span id="loremMore">Ut enim ad
    minim veniam, quis nostrud exercitation ullamco laboris nisi ut
    aliquip ex ea commodo consequat. Duis aute irure dolor in
    reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
    pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
    culpa qui officia deserunt mollit anim id est laborum.</span>
    <script type="text/javascript">
    writeMoreButton("loremMore");
    toggleContent("loremMore", false);
    </script>
    </p>
    ---
    Randy Starkey, Aug 19, 2005
    #1
    1. Advertising

  2. Randy Starkey

    RobG Guest

    Randy Starkey wrote:
    > Hi,
    >
    > Can anyone point me in the right direction on this?
    >
    > Is there a way to expand and collapse all instances of this script on a
    > single page? The script works well individually. I do the HTML header and
    > then put buttons all over the page.


    Give all the spans you want to hide & show the same class - elements can
    have multiple class names and the name does not have to appear in a
    style sheet anywhere.

    Create an array of references to them onload, then you can hide or show
    them all by looping through the array and changing the display attribute.

    You could do the same with the buttons to change toggle the value
    between '+' and '-'. The same function can do the initial hiding of
    the spans so you don't need to call toggleContent()from each script.

    Say you give all the spans you want to show or hide a class of
    'showHide', then you need something like:

    var cCollection = [];

    function makeClassArray ( nName, cName ) {
    if ( ! document.getElementsByTagName ||
    ! document.body.style ) return;
    var el, els = document.getElementsByTagName( nName );
    var i = els.length;
    var re = new RegExp('\\b' + cName + '\\b' );
    while ( i-- ) {
    el = els;
    if ( el.className && re.test(el.className) ){
    cCollection.push( el );
    el.style.display = 'none';
    }
    }
    }

    function showHide( v ){
    var i = cCollection.length;
    while ( i-- ) {
    cCollection.style.display = v;
    }
    }

    ....

    <body onload="makeClassArray( 'span', 'showHide' );">

    ....

    <input type="button" value="Show all" onclick="
    showHide('');
    ">
    <input type="button" value="Hide all" onclick="
    showHide('none');
    ">

    You may want to include support for document.all also. A similar method
    can be used to toggle the button values between '+' and '-', or you
    could try to associate the button with the span some other way so that
    the value is toggled by a function when the span is shown/hidden.


    [...]

    --
    Rob
    RobG, Aug 19, 2005
    #2
    1. Advertising

  3. Rob - Thanks! Makes sense.

    --Randy

    "RobG" <> wrote in message
    news:NYcNe.85$...
    > Randy Starkey wrote:
    >> Hi,
    >>
    >> Can anyone point me in the right direction on this?
    >>
    >> Is there a way to expand and collapse all instances of this script on a
    >> single page? The script works well individually. I do the HTML header
    >> and then put buttons all over the page.

    >
    > Give all the spans you want to hide & show the same class - elements can
    > have multiple class names and the name does not have to appear in a style
    > sheet anywhere.
    >
    > Create an array of references to them onload, then you can hide or show
    > them all by looping through the array and changing the display attribute.
    >
    > You could do the same with the buttons to change toggle the value between
    > '+' and '-'. The same function can do the initial hiding of the spans so
    > you don't need to call toggleContent()from each script.
    >
    > Say you give all the spans you want to show or hide a class of 'showHide',
    > then you need something like:
    >
    > var cCollection = [];
    >
    > function makeClassArray ( nName, cName ) {
    > if ( ! document.getElementsByTagName ||
    > ! document.body.style ) return;
    > var el, els = document.getElementsByTagName( nName );
    > var i = els.length;
    > var re = new RegExp('\\b' + cName + '\\b' );
    > while ( i-- ) {
    > el = els;
    > if ( el.className && re.test(el.className) ){
    > cCollection.push( el );
    > el.style.display = 'none';
    > }
    > }
    > }
    >
    > function showHide( v ){
    > var i = cCollection.length;
    > while ( i-- ) {
    > cCollection.style.display = v;
    > }
    > }
    >
    > ...
    >
    > <body onload="makeClassArray( 'span', 'showHide' );">
    >
    > ...
    >
    > <input type="button" value="Show all" onclick="
    > showHide('');
    > ">
    > <input type="button" value="Hide all" onclick="
    > showHide('none');
    > ">
    >
    > You may want to include support for document.all also. A similar method
    > can be used to toggle the button values between '+' and '-', or you could
    > try to associate the button with the span some other way so that the value
    > is toggled by a function when the span is shown/hidden.
    >
    >
    > [...]
    >
    > --
    > Rob
    Randy Starkey, Aug 19, 2005
    #3
    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. vivek
    Replies:
    2
    Views:
    6,210
    pushp
    Jun 14, 2007
  2. John Wohlbier
    Replies:
    2
    Views:
    358
    Josiah Carlson
    Feb 22, 2004
  3. Replies:
    8
    Views:
    448
    James Stroud
    Jan 29, 2009
  4. mt

    expand all, contract all

    mt, Oct 4, 2004, in forum: Javascript
    Replies:
    1
    Views:
    222
    Randy Webb
    Oct 4, 2004
  5. Randy Starkey

    expand / collapse all with this script

    Randy Starkey, Aug 8, 2005, in forum: Javascript
    Replies:
    1
    Views:
    88
    Randy Starkey
    Aug 10, 2005
Loading...

Share This Page