How to show a hidden div with javascript?

Question

How to show a hidden div with javascript?

Navigation

#1 by (3 votes)
#2 by (1 votes)

2

I have seen some examples online but they have not worked for me the way I need to, and when I click on the id of a href that is the same of a div show me the table that is hidden.

HTML CODE

  <a href="#" id="display_table_students"> DB STUDENTS</a>
<br>
    <div id="display_table_students" style="display: block;">
                                    <table id="table_student" class="display" cellspacing="0" width="100%" style="display: none">
                                        <thead>
                                            <tr>
                                                <th>Nombre</th>
                                                <th>Apellido</th>
                                                <th>Correo</th>
                                                <th>Editar</th>
                                            </tr>
                                        </thead>
                                    </table>
                                </div>

JS CODE

$('#display_table_students').click(function(e)
    {

      $("#formNewStudent").delay(100).fadeIn(100);
      $("#formUpdatePassword").delay(100).fadeIn(100);
      $("#formNewStudent").fadeOut(100);
      $("#formUpdatePassword").fadeOut(100);
      $('#register-form-link').removeClass('active');
      $('#login-form-link').removeClass('active');
      $(this).addClass('active');
      e.preventDefault();
    });

What's going on? that I have some forms with a small effect ex:

REGISTRAR ESTUDIANTES | ACTUALIZAR ESTUDIANTES |  DB STUDENTS <-(ESTOS SON LINKS)

Each time I click on a link, one is hidden and the other is shown with a form. What I want is when I click on the LINK DB STUDENTS the table to which I put a style= 'none' is displayed, because if I remove this attribute or style is reflected in all the links.
In few words that only and only click on DB STUDENTS I see the hidden table.
I hope you made me understand and I appreciate the interest.

javascript html

asked by JDavid 14.02.2017 в 21:11

source

2 answers

1

Do not use duplicate ids, id means identifiers, try to make them unique identifiers, if you have two containers that are similar better use classes

answered by 14.02.2017 в 23:11

Authenticate user (Facebook) with Firebase Problem running .jar in terminal

score 3 · Accepted Answer

Take care of the id duplicates, in html there should not be duplicates for this problem.

$('#display_table_students').click(function(e){
    e.preventDefault();

  $("#display_table_students").delay(1000).fadeIn(1000);
  $("#table_student").fadeIn(1000);
});

//ocultando el div con id display_table_students
$('#ocultar').click(function(e){
    e.preventDefault();

  $("#display_table_students").delay(1000).fadeOut(1000);
  $("#table_student").fadeOut(1000);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="display_table_students"> DB STUDENTS</a>
<a href="#" id="ocultar"> ocultar</a>
<br>
<div id="display_table_students" style="display: block; border: 1px solid black;">
  <table id="table_student" class="display" cellspacing="0" width="100%" style="display: none">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Correo</th>
        <th>Editar</th>
      </tr>
    </thead>
  </table>
</div>

Using id and this is duplicated tends to hide the first one that finds in this case the link.

Now solving your case would be something like this using id unicos:

$('#display_table_students').click(function(e){
    e.preventDefault();
  $("#table_student").delay(100).fadeIn(100);
  $("#table_student2").fadeOut(100);
});

$('#display_table_students2').click(function(e){
    e.preventDefault();
  $("#table_student").fadeOut(100);
  $("#table_student2").delay(100).fadeIn(100);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="display_table_students"> DB STUDENTS</a>
<a href="#" id="display_table_students2"> DB STUDENTS2</a>
<br>
<div id="div_table_students" style="display: block; border: 1px solid black;">
  <table id="table_student" class="display" cellspacing="0" width="100%" style="display: none">
    <thead>
      <tr>
        <th>Nombre</th>
        <th>Apellido</th>
        <th>Correo</th>
        <th>Editar</th>
      </tr>
    </thead>
  </table>
  <table id="table_student2" class="display" cellspacing="0" width="100%" style="display: none">
    <thead>
      <tr>
        <th>Nombre2</th>
        <th>Apellido2</th>
        <th>Correo2</th>
        <th>Editar2</th>
      </tr>
    </thead>
  </table>
</div>