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 13 of 13
  1. #1
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Expand/collapse on click

    Hi there. What my goal is is to modify what was originally an expand/collapse script, but rather than needing to click to collapse an item once it's expanded, would like it to automatically collapse when another one is expanded.

    I really would appertiate any guidance you could give me.

    I'm not asking anyone to do it for me, but pointing me in the right direction would be greatly appretiated. Thanks!

    Here is the code I am using right now:

    Code:
    <script language="JavaScript" type="text/javascript">
    <!--
    if (document.getElementById && document.createTextNode){canDOM=true}
    function collapse(id){
    	if (canDOM && document.getElementById(id)){
    		elm=document.getElementById(id);
    		elm.style.display=elm.style.display=='none'||elm.style.display==''?'block':'none';
    	}
    }
    if (canDOM){
    	document.write('<style type="text/css">.domhidden{display:none;}</style>')
    }
    //-->
    
    </script>
    
    <script language="JavaScript" type="text/javascript">
    <!--
    document.write('<a href="#" onclick="collapse(\'element1\');return false">link text here</a>');
    //-->
    </script><a href="#" onclick="collapse('element1');return false"></a>
    
    <div style="display: none;" class="domhidden" id="element1">
    expanded / collapsed stuff goes here
    </div>

  • #2
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Probably there might be several methods to do that. For me, I use a function which collapse all the items and call it in the expand function...

    Here's an example:

    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
    <
    html
    <
    head
    <
    title>Untitled Document</title
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"
    <
    meta http-equiv="Content-Style-Type" content="text/css"
    <
    meta http-equiv="Content-Script-Type" content="text/javascript"
    <
    style type="text/css"
    <!-- 
    #quiz { 
        
    position:relative
        
    font-familyArialHelveticasans-serif
        
    width:300px


        
    text-decorationnone
        
    color#000000; 

    a:hover 
        
    text-decorationunderline

    a:visited 
        
    color#000000; 

    --> 
    </
    style
    <
    script language="JavaScript" type="text/JavaScript"
    indent=5;//set here the left indent in pixels 
    iup='blueup.gif'//set here the up arrow relative location 
    idrop='bluedrop.gif'//set here the drop arrow relative location 
    //No need to modify below 
    function coll(){ 
    var 
    dd=document.getElementById('quiz').getElementsByTagName('div'); 
    var 
    aa=document.getElementById('quiz').getElementsByTagName('img'); 
    for (var 
    i=1;i<dd.length;i=i+2){ 
    dd[i].style.position='relative'
    dd[i].style.display='none'
    dd[i].style.left=indent+'px'

    for (var 
    j=0;j<aa.length;j++){ 
    im=aa[j].getAttribute('src'); 
    if(
    im==idrop){ 
    aa[j].setAttribute('src',iup);break 



    function 
    activ(w){ 
    var 
    d=w.parentNode.getElementsByTagName('div')[0]; 
    var 
    a=w.firstChild
    if(
    d.style.display=='none'){ 
    coll(); 
    d.style.display='inline'
    a.setAttribute('src',idrop); 

    else{ 
    d.style.display='none'
    a.setAttribute('src',iup); 


    onload=coll
    </script> 
    </head> 
    <body> 
    <!-- Quiz --> 
    <div id="quiz"> 
      <!-- Q11 --> 
      <div> <a href="#" onclick="activ(this)"><img src="blueup.gif" border="0">Q1...</a><br> 
        <div> Answer1 some text bla bla text text text text text text text text text 
          text text text </div> 
      </div> 
      <!-- END Q1 --> 
      <!-- Q2 --> 
      <div> <a href="#" onclick="activ(this)"><img src="blueup.gif" border="0">Q2...</a><br> 
        <div> Answer 2 text text text text text text text text text text text text 
          text text text</div> 
      </div> 
      <!-- END Q2 --> 
      <!-- Q3 --> 
      <div> <a href="#" onclick="activ(this)"><img src="blueup.gif" border="0">Q3...</a><br> 
        <div> Answer 3 text text text text text text text text text text text text</div> 
      </div> 
      <!-- END Q3 --> 
      <!-- Add below as many other Q as you need --> 
    </div> 
    <!-- END Quiz --> 
    </body> 
    </html> 
    As you can see, I have a function coll() which collapse all the items onload. Than, when I expand an item, I fire that function before expanding code line.

    function activ(w){
    var d=w.parentNode.getElementsByTagName('div')[0];
    var a=w.firstChild;
    if(d.style.display=='none'){
    coll();
    d.style.display='inline';
    a.setAttribute('src',idrop);
    }
    ...
    ...

    See also attachment
    Attached Files Attached Files
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #3
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Thank you very much for your help!

    Sorry, I really hate to be a pain but I do need to ask for more help.

    I would love to use the example code you have, but unfortunately for what I'm doing it won't work. I need the all the elements that are to be expanded in one spot, to basically make one disappear as another appears in the same spot. The links to expand them will also be elsewhere. Sorry about not being clearer.

    I've been fiddeling with the first code that I posted trying to do basically what was done in the code you posted, but I have had no luck so far. (I have little experience with javascript.) I know it must just be one little function with document.write('<style type="text/css">.domhidden{display:none;}</style>') at the start, but I just can't seem to get it to work. I've also tried doing collapse() with no result.

    If you could give me a little more giudance it would really be appreciated.

    Thanks again.

  • #4
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    are to be expanded in one spot
    To be expanded/collapsed ? Or simply visible/hidden ? First case, the object will "push" down all the elements bellow. Second object keeps its dimension and simply appears/dissapers

    can you detail your project?
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #5
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ah, yes I meant hidden or visible. So for example, at the top of the page there is a blank box area with size enough to fill the content that is being used. (Actually, I plan to make the area where the content will appear/disappear be a div with scrollbars. Just being as specific as possible in case it makes any difference. ) Then as any link (that is telling the certain content to appear) is clicked, the content appears in the box. As another one is clicked, it also appears in the box, as the other content disappears at the same time.

    Hope this is more clear.
    Last edited by tom22; 10-14-2004 at 08:57 PM.

  • #6
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    Something like this?
    PHP Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <
    html>
    <
    head>
    <
    title>Untitled Document</title>
    <
    meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <
    meta http-equiv="Content-Style-Type" content="text/css">
    <
    meta http-equiv="Content-Script-Type" content="text/javascript">
    <
    script language="JavaScript" type="text/JavaScript">
    var 
    stuff = new Array()
    stuff[0] ='Text 0 here text blah blah text text 0000';
    stuff[1] ='Some Text 1 here text blah blah text text 1111 text 111';
    stuff[2] ='another Text 222 here 2 text blah blah text text 22 text 22222';
    function 
    changeTxt(w){
    d=document.getElementById('lin').getElementsByTagName('a');
    for(var 
    i=0;i<d.length;i++){
        if(
    d[i]==w){q=i;break}
    }
    document.getElementById('stu').innerHTML=stuff[q];
    }
    </script>
    </head>
    <body>
    <div id="stu" style="position:absolute; left: 200; width: 100; top: 10; z-index: 2; background-color: #CCCCCC; layer-background-color: #CCCCCC; border: 1px none #000000;"> 
    <!-- visible/hidden stuff gous here -->
    </div>
    <!-- LINKS START -->
    <div id="lin">
    <a href="#" onclick="changeTxt(this);return false">View text stuff 0</a><br>
    <a href="#" onclick="changeTxt(this);return false">View text stuff 1</a><br>
    <a href="#" onclick="changeTxt(this);return false">View text stuff 2</a><br>
    </div>
    <!-- LINKS END -->
    </body>
    </html> 
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #7
    New to the CF scene
    Join Date
    Oct 2004
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Awesome, looks like just what I need! Thank you very much for all your help.

  • #8
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    script works great but have a question about using on a long FAQ page

    I am using the script you posted above (it works great !!) for expandable divs but ...the focus is on the top of the page ie..the div id #quiz, and I am trying to use if for a lengthy FAQ page.
    when you scroll to the bottom of the page and open a question, the focus pops back to the top of the page.
    I thought of defining several sections, but when I do only one is collapsed, the others are open on page load
    any ideas?

    <script language="JavaScript" type="text/JavaScript">
    indent=5;//set here the left indent in pixels
    iup='images/blueup.gif'//set here the up arrow relative location
    idrop='images/bluedrop.gif'//set here the drop arrow relative location
    //No need to modify below
    function coll(){
    var dd=document.getElementById('quiz').getElementsByTa gName('div');
    var aa=document.getElementById('quiz').getElementsByTa gName('im');
    for (var i=1;i<dd.length;i=i+2){
    dd[i].style.position='relative';
    dd[i].style.display='none';
    dd[i].style.left=indent+'px';
    }
    for (var j=0;j<aa.length;j++){
    im=aa[j].getAttribute('src');
    if(im==idrop){
    aa[j].setAttribute('src',iup);break
    }
    }
    }
    function activ(w){
    var d=w.parentNode.getElementsByTagName('div')[0];
    var a=w.firstChild;
    if(d.style.display=='none'){
    coll();
    d.style.display='inline';
    a.setAttribute('src',idrop);
    }
    else{
    d.style.display='none';
    a.setAttribute('src',iup);
    }
    }
    onload=coll;
    </script>


    http://www.nmprc.state.nm.us/ftalfaq2.htm

    test page with more than one section
    http://www.nmprc.state.nm.us/alfaq3.htm
    Last edited by kdeguero; 02-28-2007 at 05:01 PM. Reason: add second url

  • #9
    Kor
    Kor is offline
    Red Devil Mod Kor's Avatar
    Join Date
    Apr 2003
    Location
    Bucharest, ROMANIA
    Posts
    8,478
    Thanks
    58
    Thanked 379 Times in 375 Posts
    You should prevent the HTML action (href="#" will bring the page to the top) by returning it false (as in my example, but it looks like you have not noticed that)
    Code:
    <a href="#" onclick="active(this);return false">
    Last edited by Kor; 02-28-2007 at 07:54 PM.
    KOR
    Offshore programming
    -*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*-*

  • #10
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    code is working fine

    I replaced all code as you suggest and it works well, thank you
    I do not know much javascript, if I can get the code to work its all good, but when I run into a problem, i do not know how to fix it, thank you for your help.
    Last edited by kdeguero; 02-28-2007 at 10:33 PM. Reason: code is working fine

  • #11
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how do you have 2 different collapsable sections in a page

    sorry...duplicate

  • #12
    New to the CF scene
    Join Date
    Feb 2007
    Posts
    5
    Thanks
    0
    Thanked 0 Times in 0 Posts

    how do you have 2 different collapsable sections in a page

    I have a tabbed page, that has an expandable/collapsable section on each tab, but I can't figure out how to make them both collapse on page load.
    I have tried several different things....so this link is one of my tries

    thank you for your help, as I said above, I only know how to 'use' javascript, not create it

    http://www.nmprc.state.nm.us/rfcnew.htm
    Last edited by kdeguero; 03-09-2007 at 06:13 PM. Reason: fixing link

  • #13
    New to the CF scene
    Join Date
    Jan 2006
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Still having problems..

    I read the directions and copied and pasted the code exactly into a blank document, it worked perfectly.

    I had a space for it in another document, and it doesn't work.
    Below is the link. can someone help me out.

    http://addlivevoice.com/test/howitworks.html

    I want it so that the collapsing text is not visible, until you click each one.
    Right now all of it shows.


  •  

    Posting Permissions

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