показать скрытое содержимое div при нажатии кнопки

Question

Привет, ребята? как я могу скрыть содержимое div до нажатия кнопки ?. Может ли кто-нибудь помочь мне, пожалуйста. Я хочу, чтобы этот div не появлялся, пока не нажимается кнопка «добавить нового учителя» в таблице. Это содержание DIV, который я хочу, чтобы это было скрыто, пока не будет нажата кнопка

 <div id="myform"> 
<p align="center"> 
<strong> 
Add information for new teacher here 
</strong></p> 
<form action="<?php echo $editFormAction; ?>" method="post" name="form1" id="form1"> 
    <table align="center" id="forms"> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">First name:</td> 
     <td><input type="text" name="first_name" value="" size="32" /></td> 
    </tr> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">Last name:</td> 
     <td><input type="text" name="last_name" value="" size="32" /></td> 
    </tr> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">Subjects:</td> 
     <td><input type="text" name="subjects" value="" size="32" /></td> 
    </tr> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">Phonenumber:</td> 
     <td><input type="text" name="phonenumber" value="" size="32" /></td> 
    </tr> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">Email:</td> 
     <td><input type="text" name="email" value="" size="32" /></td> 
    </tr> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">Username:</td> 
     <td><input type="text" name="username" value="" size="32" /></td> 
    </tr> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">Password:</td> 
     <td><input type="text" name="password" value="" size="32" /></td> 
    </tr> 
    <tr valign="baseline"> 
     <td nowrap="nowrap" align="right">&nbsp;</td> 
     <td><input type="submit" value="Insert record" id="hideit"/></td> 
    </tr> 
    </table> 
    <input type="hidden" name="MM_insert" value="form1" /> 
</form> 
<p>&nbsp;</p> 
</div> 

И это мой стол, который содержит «Add New Teacher» кнопка

<p align="center"> 
<strong> 
List of teachers in Minaki Sec school 
</strong></p> 
<table border="1" align="center" class="altrowstable" id="alternatecolor"> 
    <tr id="row"> 
    <th>teacher id</th> 
    <th>first name</th> 
    <th>last name</th> 
    <th>subjects</th> 
    <th>Phonenumber</th> 
    <th>Email</th> 
    <th>username</th> 
    <th>password</th> 
    <th>Edit</th> 
    <th>Delete</th> 
    <th>Details</th> 
    </tr> 
    <?php do { ?> 
    <tr> 
     <td><?php echo $row_teacherrec['teacher_id']; ?></td> 
     <td><?php echo $row_teacherrec['first_name']; ?></td> 
     <td><?php echo $row_teacherrec['last_name']; ?></td> 
     <td><?php echo $row_teacherrec['subjects']; ?></td> 
     <td><?php echo $row_teacherrec['phonenumber']; ?></td> 
     <td><?php echo $row_teacherrec['email']; ?></td> 
     <td><?php echo $row_teacherrec['username']; ?></td> 
     <td><?php echo $row_teacherrec['password']; ?></td> 
     <td><button onclick="location.href= 'edit_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Edit</button></td> 
     <td><button onclick="location.href= 'delete_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Delete</button></td> 
     <td><button onclick="location.href= 'edit_teacher.php? teacher_id=<?php echo $row_teacherrec['teacher_id']; ?>'">Details</button></td> 
    </tr> 
    <?php } while ($row_teacherrec = mysql_fetch_assoc($teacherrec)); ?> 
    <tr> 
    <td colspan="8"></td> 
    <td colspan="6" align="center"><button id="showit" onclick="location.href='teacher.php'">+Add new Teacher</button></td> 
    </tr> 
    </table> 

Answer 1

Добавить display:none стиль вашего DIV , затем вызовите $("#div-id").show(); при нажатии кнопки.

<div id="myform" style="display:none"> 
    // contents here 
</div> 

Answer 2

Попробуй, как,

$(function(){ 
    $('button#showit').on('click',function(){ 
     $('#myform').show(); 
    }); 
}); 

Первоначальноdiv должен быть hidden как

<div id="myform" style="display:none"> 
..... 

Answer 3

Вы можете использовать JQuery скрыть и показать функции.

ЗДЕСЬ

Show

Hide

Answer 4

на новой форме учитель добавить встроенный стиль, чтобы скрыть форме

<div id="myform" style="display:none"> 

или внутри JQuery просто добавить

$(document).ready(function(){ 
    // hide form on page load 
    $('#myform').hide(); 

    // when button is pressed 
    $('button').on('click',function(){ 
     $('#myform').show(); 
    }); 
}); 

Answer 5

Внести следующие изменения в вас код:

<div id="myform" style="display:none;"> 

Добавьте стиль в вашей DIV, который вы хотите скрыть.

и изменить код кнопки как:

<button id="showit">+Add new Teacher</button> 

И добавить JQuery:

$(document).ready(function(){ 
    $("#showit").click(function(){ 
     $("#myform").css("display","block"); 
    }); 
}); 

Answer 6

$(function(){ 
    $('.button_name').click(function(){ 
     $('#myform').show(); 
    }); 
}); 





<button class="button_name"> 


    <div id="myform" style="display:none"> 

или с помощью Java Script

function new_disp(){ 
    document.getElementById('myform').style.display='block'; 
} 




<button onclick='new_disp();'> 


    <div id="myform" style="display:none">