Use showDiv() multiply times.

[oz11]

Please could you help..

 

I need to make this code allow me to use the showDiv function multiple times on the page..

 

<script type="text/javascript">
function showDiv() {
   document.getElementById('welcomeDiv').style.display = "block";
}
function hideDiv() {
   document.getElementById('welcomeDiv').style.display = "none";
}
</script>

<a name="answer" value="Show Div" onclick="showDiv()" >Show</a>

<div id="welcomeDiv"  style="display:none;" class="answer_list" >
<h2>Hello</h2>
<button onclick="hideDiv()" class="loginBut" style="font-family: 'Handjet', cursive;  font-size: 2EM;">Close</button>
</div>

Thanks.

 

It seems I need to add an index variable to the function. Don't know how though.. I'm new to JS.

Edited December 8, 2023 by oz11

[Barand]

Such as by passing the id of the div to be shown/hidden as a function argument?

function hideDiv(divid) {
   document.getElementById(divid).style.display = "none";
}

. . . 

<button onclick="hideDiv('welcomeDiv')" class="loginBut" style="font-family: 'Handjet', cursive;  font-size: 2EM;">Close</button>

 

[oz11]

Thanks pal.

Just to finalise this was the [whole] working code:

<script type="text/javascript">

function showDiv(divid) {
   document.getElementById(divid).style.display = "block";
}
function hideDiv(divid) {
   document.getElementById(divid).style.display = "none";
}
</script>

<a name="answer" value="Show Div" onclick="showDiv('one')" >Show</a>
<div id="one"  style="display:none;" class="answer_list" >
<h2>Hello</h2>
<button onclick="hideDiv('one')" class="loginBut" style="font-family: 'Handjet', cursive;  font-size: 2EM;">Close</button>
</div>


<a name="answer" value="Show Div 2" onclick="showDiv('two')" >Show</a>
<div id="two"  style="display:none;" class="answer_list" >
<h2>Hello2</h2>
<button onclick="hideDiv('two')" class="loginBut" style="font-family: 'Handjet', cursive;  font-size: 2EM;">Close</button>
</div>

 

[oz11]

Know how to get it to hide on second click? 

[Barand]

Inside the function, check it's display status. If hidden, show it. If not hidden, hide it.

[oz11]

this code worked for me. . Thanks again!

 

<script type="text/javascript">

function showDiv(divid) {
  var x = document.getElementById(divid);
  if (x.style.display === "none") {
    x.style.display = "block";
  } else {
    x.style.display = "none";
  }
}
</script>

 

[kicken]

As a general recommendation, you could instead create a class that applies the display: none; style then use toggle.

.removed {
  display: none;
}

function showDiv(divid) {
  document.getElementById(divid).classList.toggle('removed');
}

 

[Barand]

Or you could use jquery toggle to do the heavy lifting for you

    <div style='border: 2px solid black; padding: 16px; margin-bottom: 16px;' id='target'>
        Hello
    </div>
        <button onclick='showhide("target")'>Show/Hide</button>
    
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>    
    <script>
    function showhide(id)
    {
        $("#"+id).toggle(0)
    }
    </script>