show hidden div content when button is pressed

Question

Hi guys? how can i hide div content until a button is pressed?. Can anyone help me please.I want this div not to show up until the "add new teacher" button in the table is pressed. This is the div content which i want it to be hidden until the button is pressed

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

And this is my table which contain "Add New Teacher" button

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

Possibly a duplicate question. http://stackoverflow.com/questions/4357291/javascript-show-element-on-click — harrypujols, Sep 11 '13 at 11:21

Rohan Kumar · Answer 1 · 2013-09-11T11:35:28.380

3

Try it like,

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

Initially the div should be hidden like

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

edited Sep 11 '13 at 11:35

answered Sep 11 '13 at 11:14

Rohan Kumar

40,431
11
76
106

score 2 · Answer 2 · answered Sep 11 '13 at 11:18

2

Make the following changes in you code:

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

Add the style in your div which you want to hide.

And Modify your button code as:

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

And add this jQuery:

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

answered Sep 11 '13 at 11:18

Code Lღver

15,573
16
56
75

Thank you.. I did exactly as you said and its working just like i needed. Thanks – maro Sep 11 '13 at 12:08

score 1 · Answer 3 · edited Sep 11 '13 at 11:29

1

Add display:none style to your div, then call $("#div-id").show(); on button click.

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

edited Sep 11 '13 at 11:29

Joetjah

6,292
8
55
90

answered Sep 11 '13 at 11:14

Anshad Vattapoyil

23,145
18
84
132

score 1 · Answer 4 · answered Sep 11 '13 at 11:16

on your new teacher form add an inline style to hide the form

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

or within your jQuery simply add

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

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

score 0 · Answer 5 · answered Sep 11 '13 at 11:14

0

You can use jQuery hide and show functions.

HERE

Show

Hide

answered Sep 11 '13 at 11:14

Akki619

2,386
6
26
56

score 0 · Answer 6 · answered Nov 05 '16 at 13:41

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





<button class="button_name">


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

or using java script

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




<button onclick='new_disp();'>


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

show hidden div content when button is pressed

6 Answers6