CODEWITHSUNDEEP
javascriptjquery
R P
R P

Reputation: 35

Hiding and showing content in a HTML table

I have a table with huge sentences as data in the cells. I have given the following example where all data in the tag <td> must not be visible until mouse click, but right now each click I do I hide the data and it cannot be brought back.

Please find the bug in my code, such that on the first mouse click it shows all the data and the second mouse it hides it again. 

$(document).ready(function() {
  $("td").click(function() {
    $(this).toggleClass("hidden");
  });
});
.main {
  font-size: 120%;
  color: red;
}

.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

Here is a link for the code https://www.w3schools.com/code/tryit.asp?filename=FUWHD8EBKK6Y

Upvotes: 1

Views: 74

Answers (3)

Marat Badykov
Marat Badykov

Reputation: 844

It should work, check;) 

$(document).ready(function() {
  $("td").each(function(i, obj) { 
     $(this).toggleClass("hidden");
     $(this).on("click", function(){
        $("td").toggleClass("hidden");
     });
  });
});
.main {
  font-size: 120%;
  color: red;
}

.hidden {
  opacity:0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

if you want hide only one cell in table, change inner selector like this

     $("td").each(function(i, obj) {
         $(this).on("click", function(){
            $(this).toggleClass("hidden");
         });
      });

Better add "hidden" class in html. You can delete this from js

$(this).toggleClass("hidden");

And add "hidden" class to td elements.

Upvotes: 1

Martin
Martin

Reputation: 2414

As mentioned per my comment, you can use .toggle(); instead of using a hide class. .toggle(); already works as a show/hide function. You can then use .find(); to hide certain elements, instead of hiding the entire element, which is what you encountered after my comment. You have a span element with a class. You can simply select the class within your respective td element and do a toggle on that.

Example:

<!DOCTYPE html>
<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

        <script>
            $(document).ready(function(){
                $("td").click(function(){
                    $(this).find('.hidden').toggle();
                });
            });
        </script>
        <style>
            .main {
                font-size: 120%;
                color: red;
            }

            .hidden {
                display: none;
            }
        </style>
    </head>
    <body>
        <table style="width:100%">
            <tr>
                <th>Firstname</th>
                <th>Lastname</th> 
                <th>Age</th>
            </tr>
            <tr>
                <td>Jill blah blah blah blah  <span class="hidden"> hidden information jfkajfksdlf </span></td>
                <td>Smith</td> 
                <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
            </tr>
            <tr>
                <td>Eve</td>
                <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td> 
                <td>94</td>
            </tr>
        </table>
    </body>
</html>

Upvotes: 0

Rory McCrossan
Rory McCrossan

Reputation: 337560

The issue is because you're changing the class on the td itself, not the child span.

To fix the problem, use find() and toggle() instead, like this:

$(document).ready(function() {
  $("td").click(function() {
    $(this).find('.hidden').toggle();
  });
});
.main {
  font-size: 120%;
  color: red;
}

.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table style="width:100%">
  <tr>
    <th>Firstname </th>
    <th>Lastname</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Jill blah blah blah blah <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>Smith</td>
    <td>50 <span class="hidden"> hidden information jfkajfksdlf </span></td>
  </tr>
  <tr>
    <td>Eve</td>
    <td>Jackson <span class="hidden"> hidden information jfkajfksdlf </span></td>
    <td>94</td>
  </tr>
</table>

Upvotes: 0

Related Questions