hide href links unless they have been clicked

Question

I have this simple hide/show input box code, but I want to change it so that you don't see all the links at once but instead only the links that have been clicked and the one link after the last one that was clicked so in the beginning only link 1 is shown. Then if it is clicked only link 1 and 2 are shown and if link 2 is clicked only link 1,2 and 3 are shown and so on, is there a way to adapt this code to make that possible?

<script type="text/javascript">

function show(id){ 
if(document.getElementById(id).style.display=="none")
{ 
   document.getElementById(id).style.display="block"  
} 
else{ 
       document.getElementById(id).style.display="none" 
    } 
                 } 

</script>

<a href="#null" onclick="show('t1')">Link 1</a> <input type="text" id="t1"    
 style="display:none"><BR>
<a href="#null" onclick="show('t2')">Link 2</a> <input type="text" id="t2"   
style="display:none"><BR> 
<a href="#null" onclick="show('t3')">Link 3</a> <input type="text" id="t3" 
style="display:none"><BR>
<a href="#null" onclick="show('t4')">Link 4</a> <input type="text" id="t4"   
style="display:none"><BR>
<a href="#null" onclick="show('t5')">Link 5</a> <input type="text" id="t5"    
style="display:none"><BR>

Answer 1

based on assuming option 'a' from my comment on the original post, change the code slightly to:

<script type="text/javascript"> 
function show(id){ 
  if(document.getElementById(id+"-link").style.display=="none") { 
    document.getElementById(id+"-link").style.display="block";  
    document.getElementById(id+"-input").style.display="block";  
  } 
} 
</script>

<a href="#null" onclick="show('t2')">Link 1</a> <input type="text" id="t1"><BR>
<a href="#null" style="display:none" id="t2-link" onclick="show('t3')">Link 2</a> <input type="text" id="t2-input" style="display:none"><BR>  
<a href="#null" style="display:none" id="t3-link" onclick="show('t4')">Link 3</a> <input type="text" id="t3-input" style="display:none"><BR>

Basically, offset the id's in the call to 'show' so that clicking each link shows the next one, and don't hide the first. note that 't2' etc is now just part of the id, and the 'show' function has to expand it to include all elements to show/hide

I've not bothered to include a separate toggle to show/hide the inputs, and i've removed the code to hide the links if the user clicks a second time

Answer 2

I could be wrong, but it looks like you want it to expand and collapse as the links are clicked on.

I have a solution in a fiddle you to look at. It expands and collapses as the links are clicked. Also, the collapse cascades if they click a link before the last one expanded.

http://jsfiddle.net/XxURd/14/

Hope this helps.

Javascript follows

$('a.control').click( function(){
    var show = this.id;
    if($('#wrapper > div.' + show).is(':hidden')) {
        $('#wrapper > div.' + show).show();
        return false;
    }
    else {
        if(show == 'fieldset1') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            $('#wrapper > div.fieldset3').hide();
            $('#wrapper > div.fieldset2').hide();
            $('#wrapper > div.fieldset1').hide();
            return false;
        }
        if(show == 'fieldset2') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            $('#wrapper > div.fieldset3').hide();
            $('#wrapper > div.fieldset2').hide();
            return false;
        }
        if(show == 'fieldset3') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            $('#wrapper > div.fieldset3').hide();
            return false;
        }
        if(show == 'fieldset4') {
            $('#wrapper > div.fieldset5').hide();
            $('#wrapper > div.fieldset4').hide();
            return false;
        }
        if(show == 'fieldset5') {
            $('#wrapper > div.fieldset5').hide();
            return false;
        }
    }
});​

CSS follows

#wrapper {
    left: 0px;
    width: 300px;
    margin: 0 auto;
}

#wrapper > div {
    display: none;
    width: 300px;
    height: 55px;
    float: left;
}​

HTML follows

<div id="wrapper">
    <a href="#" id="fieldset1" class="control">link 1</a><br/>
    <div class="fieldset1" id="fs1">
        fieldset1: <input type="text" name="fld1"><br />
        &nbsp;<br />
        <a href="#" id="fieldset2" class="control">link 2</a><br/>
    </div>

    <div class="fieldset2" id="fs2">
        fieldset2: <input type="text" name="fld2"><br />
        &nbsp;<br />
        <a href="#" id="fieldset3" class="control">link 3</a><br/>
    </div>

    <div class="fieldset3" id="fs3">
        fieldset3: <input type="text" name="fld3"><br />
        &nbsp;<br />
        <a href="#" id="fieldset4" class="control">link 4</a><br/>
    </div>

    <div class="fieldset4" id="fs4">
        fieldset4: <input type="text" name="fld4"><br />
        &nbsp;<br />
        <a href="#" id="fieldset5" class="control">link 5</a><br/>
    </div>

    <div class="fieldset5" id="fs5">
        fieldset5: <input type="text" name="fld5"><br />
        &nbsp;<br />
    </div>
</div>​