Скрытая форма показывается пустая область

Question

Я хотел бы скрыть форму внутри кнопки. Скрытие формы выполняется, но проблема в том, что размер области скрытых форм отображается как пустая область под моим ящиком, поэтому у меня есть большое пространство между нижней частью кнопки и содержимым под кнопкой, например. другая кнопка.

Кнопка Код

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

Форма Код

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

Я предполагаю, что эффект я ищу, что кнопка не держит форму внутри него до тех пор, нажата кнопка, а затем форма снижается, чтобы отобразиться под ней. Также, если возможно, что если кнопку снова нажать, пока форма показывает, что форма помещается обратно внутри кнопки, так что она больше не видна, пока она не будет снова нажата.

Answer 1

Использовать параметр Toggle Option в 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

Answer 2

Вы должны использовать свойство css «display» вместо «visibility». См CSS Properties: Display vs. Visibility

Answer 3

Вместо style="visibility:hidden;" использования display:none;

дисплей:. Никто не удаляет элемент из нормального потока страницы, позволяя другие элементы для заполнения
visibility:hidden оставляет элемент в нормальном потоке страницы такой, который все еще занимает пространство.

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

Answer 4

правильный 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> 

и JavaScript:

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

EDIT: обратите внимание, что вам нужно использовать свойство 'Дисплей', а не 'видимость'