Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 4 of 4
  1. #1
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts

    Help with expand/collapse accordion style javascript

    Hey everyone. I am a fresh newbie to this forum. I was hoping someone can help me complete the following JS code to fulfill the needs for one of my sites. Currently, this code shows a hidden div containing content. The only problem is that it doesn't collapse the content upon clicking a new link. You have to manually click the original link a second time to collapse the content. Does anyone know how I can finish this code so that content1 will automatically collapse when content2 is called??? Here is the code:

    JS
    function toggleMe(a){
    var e=document.getElementById(a);
    if(!e)return true;
    if(e.style.display=="none"){
    e.style.display="block"
    } else {
    e.style.display="none"
    }
    return true;
    }

    Related HTML (<p>idname = a general file name for each link)
    <input type="button" class="button" onclick="return toggleMe('<p>idname')" value="<p>idname" />
    <div id="<p>idname" style="display:none">

    Here is the link to the page in question. The top 4 links in the right nav have the expand command working, and manual collapse command working.
    http://www.db-elements.com/ahimsa/bl...dex_w_js2.html

    Any ideas are greatly appreciated. Thanks in advance.

    Dave

  • #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    14,852
    Thanks
    160
    Thanked 2,223 Times in 2,210 Posts
    Blog Entries
    1
    Validate your markup and fix all errors first, see http://validator.w3.org/check?uri=ht...Inline&group=0
    The Dream is not what you see in sleep; Dream is the thing which doesn't let you sleep. --(Dr. APJ. Abdul Kalam)

  • #3
    Senior Coder rangana's Avatar
    Join Date
    Feb 2008
    Location
    Cebu City, Philippines
    Posts
    1,752
    Thanks
    65
    Thanked 372 Times in 365 Posts
    For your problem, try to add highlighted:
    Code:
    	function toggleMe(a){
      var e=document.getElementById(a);
      for(var i=0,divs=document.getElementById('containerLyrics').getElementsByTagName('div');i<divs.length;i++)
    divs[i].style.display='none';
    if(!e)return true;
      if(e.style.display=="none"){
        e.style.display="block"
      } else {
        e.style.display="none"
      }
      return true;
    }
    Hope it helps.
    Learn how to javascript at 02geek

    The more you learn, the more you'll realize there's much more to learn
    Ray.ph

  • Users who have thanked rangana for this post:

    optimus203 (09-04-2008)

  • #4
    Regular Coder optimus203's Avatar
    Join Date
    Sep 2008
    Location
    CT
    Posts
    317
    Thanks
    22
    Thanked 16 Times in 15 Posts
    Yes rangana! That works perfectly, from what I can see. Thanks so much for your help in resolving this matter. All the other solutions people presented on other forums were a lot more work than this addition of your. I'm been trying to wrap my head around the easiest way to approach this issue, and this is it. Respectfully, Dave


  •  

    Posting Permissions

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