Hidden form displays empty area

Question

I would like to hide a form within a button. Hiding the form is done but the problem is that the hidden forms area size is displayed as an empty area under my box so I have a big space between the bottom of the button and content below the button e.g. another button.

Button Code

<button class="myButtonl" onclick='showForm();'>Create a Player</button>

Form Code

<div id="div1" style="visibility:hidden;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

Javascript

<script>
    function showForm() { 
        document.getElementById('div1').style.visibility= 'visible' ;
    }
</script>

I guess the effect i am looking for is that the button holds the form inside of it until the button has been clicked and then the form drops down to be displayed below it. Also if it is possible that if the button is clicked again while the form is showing that the form is put back inside of the button so it is not visible any more until it is clicked again.

Use `show/hide` instead of `visibility`? – Paulie_D Jan 28 '14 at 10:41 — Paulie_D, Jan 28 '14 at 10:41
He is not using jQuery in order to user show/hide – Petar Vasilev Jan 28 '14 at 10:47 — Petar Vasilev, Jan 28 '14 at 10:47

Petar Vasilev · Answer 1 · 2014-01-28T11:09:04.520

4

correct html:

<div id="div1" style="display:none;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

and javascript:

function showForm() { 
    document.getElementById('div1').style.display = 'block' ;
}

EDIT: note that you need to use the 'display' property rather than the 'visibility'

edited Jan 28 '14 at 11:09

answered Jan 28 '14 at 10:44

Petar Vasilev

4,281
5
40
74

Works like a dream would be a lot better if it would go back into the button when click again but hey at least it does the job – Luke G Jan 28 '14 at 10:50
+1 : but with `correct html` mention what was wrong too next time onwards :) – NoobEditor Jan 28 '14 at 10:59

score 2 · Answer 2 · edited Jan 28 '14 at 10:58

2

Instead of style="visibility:hidden;" use display:none;

display:none removes the element from the normal flow of the page, allowing other elements to fill in.
visibility:hidden leaves the element in the normal flow of the page such that is still occupies space.

<div id="div1" style="display:none;">
   <form action="team.php" method="POST" name="profiles">
       <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
   </form>
</div>

<script>
  function showForm() { 
     document.getElementById('div1').style.display= 'block' ;
  }
</script>

edited Jan 28 '14 at 10:58

NoobEditor

15,563
19
81
112

answered Jan 28 '14 at 10:44

Praveen Govind

2,619
2
32
45

1

Cheers dude. Same answer as the one I have used but hey it is the same one so I could have used this one instead. Thanks. – Luke G Jan 28 '14 at 10:51

score 2 · Accepted Answer · answered Jan 28 '14 at 10:49

2

Use Toggle Option in jquery

HTML

     <button class="myButtonl" onclick='showForm();'>Create a Player</button>

<div id="div1" style="display:none;">
    <form action="team.php" method="POST" name="profiles">
        <div>Team Name: <input type="text" name="psn" value=""></div>
        <input type="submit">
    </form>
</div>

Jquery

function showForm() { 
   $('#div1').toggle();
}

Demo FIDDLE

answered Jan 28 '14 at 10:49

P.Sethuraman

705
3
5

I know this needs jquery to use but you might want to state that in the answer so others that come by this awesome answer also gets the info they need to get it working. Thanks again dude you rock – Luke G Jan 28 '14 at 11:09

score 0 · Answer 4 · edited May 23 '17 at 12:11

0

You should use the css property "display", instead of "visibility". See CSS Properties: Display vs. Visibility

edited May 23 '17 at 12:11

Community

1
1

answered Jan 28 '14 at 10:44

Skymt

1,089
9
10

Hidden form displays empty area

4 Answers4