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. #2
    Supreme Master coder! abduraooft's Avatar
    Join Date
    Mar 2007
    Location
    N/A
    Posts
    15,006
    Thanks
    164
    Thanked 2,244 Times in 2,231 Posts
    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. #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

  4. Users who have thanked rangana for this post:

    optimus203 (09-04-2008)

  5. #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
  •