Home/ Questions/Q 9061477
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-16T15:29:39+00:00

I have this simple hide/show input box code, but I want to change it

  • 0

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>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    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

    • 0