Results 1 to 7 of 7

Thread: Need a Toggle Div Script, BUT...

  1. #1
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default Need a Toggle Div Script, BUT...

    Hi all
    I need a script to toggle div's but the problem is I cannot reference any JavaScript on the page I'm working on which is making this simple task a nightmare.

    Would anyone by any chance know how to toggle content (or show/hide) div's without using: <script type="text/javascript">

    NOTE... I can use inline JavaScript, I just can't imbed any code in the page or reference an external JavaScript file.

    Any help would be soooooo appreciated.
    thanks for your time

  2. #2
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    Kinda messy, but give this a try:
    Code:
    <div id="toggle">Hi</div>
    <button onclick="
    if(document.getElementById('toggle').style.display == 'none'){
       document.getElementById('toggle').style.display = 'block';
    } else {
       document.getElementById('toggle').style.display = 'none';
    }
    ">Toggle</button>
    Jeremy | jfein.net

  3. The Following 2 Users Say Thank You to Nile For This Useful Post:

    MizzBia (01-06-2009),saynogo9999 (01-06-2009)

  4. #3
    Join Date
    Dec 2008
    Posts
    35
    Thanks
    3
    Thanked 1 Time in 1 Post

    Default

    Nile, i couldnt get your script working correctly. Everytime i clicked the button, the page did refresh. I have one here that are compatiple with more browsers if needed.

    Code:
    <script language="javascript">
    var state = 'hidden';
    
    function showhide(layer_ref) {
    
    if (state == 'visible') {
    state = 'hidden';
    }
    else {
    state = 'visible';
    }
    if (document.all) { //IS IE 4 or 5 (or 6 beta)
    eval( "document.all." + layer_ref + ".style.visibility = state");
    }
    if (document.layers) { //IS NETSCAPE 4 or below
    document.layers[layer_ref].visibility = state;
    }
    if (document.getElementById && !document.all) {
    maxwell_smart = document.getElementById(layer_ref);
    maxwell_smart.style.visibility = state;
    }
    }
    </script>
    Code:
    <div id="toggle" style="visibility:hidden;">Content</div>
    
    or
    
    <div id="toggle" style="visibility:visible;">Content</div>
    
    <a href="javascript://" onclick="showhide('toggle');">Toggle</a>

  5. The Following User Says Thank You to saynogo9999 For This Useful Post:

    MizzBia (01-06-2009)

  6. #4
    Join Date
    Dec 2008
    Posts
    8
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by Nile View Post
    Kinda messy, but give this a try:
    Code:
    <div id="toggle">Hi</div>
    <button onclick="
    if(document.getElementById('toggle').style.display == 'none'){
       document.getElementById('toggle').style.display = 'block';
    } else {
       document.getElementById('toggle').style.display = 'none';
    }
    ">Toggle</button>
    Hi Nile,
    thank you so much for your help!! The code worked wonderfully
    I truly appreciate your help on this!

  7. #5
    Join Date
    Jan 2008
    Posts
    4,167
    Thanks
    28
    Thanked 628 Times in 624 Posts
    Blog Entries
    1

    Default

    I'm glad to help you MizzBia!

    saynogo9999 please make sure you have an up to date browser.
    Jeremy | jfein.net

  8. #6
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default This is exactly what I was looking for

    with one change that I am completely stumped by. How do I set the begin state to off? I'd like the content to appear after the user clicks the button, rather than the content disappearing when they click the button. Thanks in advance for any help.

  9. #7
    Join Date
    Nov 2009
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default never mind

    duh - display:none. I really need to get some sleep. Thanks very much - this little snip is perfect.

Bookmarks

Posting Permissions

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