2

On my page.php I have 3 buttons :

<input type="submit" value="Btn 1"  id="btn1">   
<input type="submit" value="Btn 2" id="btn2" onClick="action();>  
<input type="submit" value="Btn 3" id="btn3" onClick="action();>

first Btn 1 button hidden with load:

document.getElementById('btn1').style.visibility = 'hidden';

with click on Btn 2 or Btn 3 I want hide Btn 2 or Btn 3 and show Btn 1:

var hidden = false;
    function action() {
        hidden = !hidden;
        if(hidden) {
            document.getElementById('btn1').style.visibility = 'visible';
            document.getElementById('btn2').style.visibility = 'hidden';
            document.getElementById('btn3').style.visibility = 'hidden';
        } 
    }

this way hidden button Btn 1 leaves empty space in place where it was visible, or if I put it below Btn 2 and Btn 3 then I got two empty spaces in places of Btn 2 and Btn 3.

How it is possible show and hide buttons in same place on html page

  • Possible duplicate of [How to hide elements without having them take space on the page?](https://stackoverflow.com/questions/2928688/how-to-hide-elements-without-having-them-take-space-on-the-page) – Heretic Monkey Aug 27 '19 at 21:41

1 Answers1

3

Try this below using display:none;

difference between visibility:hidden and display:none

var btn1 = document.getElementById('btn1');

function action(el) {
  el.classList.add('hide');
  btn1.classList.remove('hide');
}
.hide {
  display: none;
}
<input type="submit" class="hide" value="Btn 1" id="btn1">
<input type="submit" value="Btn 2" id="btn2" onClick="action(this);">
<input type="submit" value="Btn 3" id="btn3" onClick="action(this);">
Nidhin Joseph
  • 9,981
  • 4
  • 26
  • 48
  • Hello, so I can do it this way document.getElementById('btn2').style.display = 'none'; –  Aug 27 '19 at 21:56