Have Geek Brain

Refactoring link to show / hide table row

I have a table with a row whose cockpit is hidden by the user. It is implemented as follows:

Markup:

<table>
   <tr>
      <td>
         <table style="margin-left: auto; text-align: right;">
            <tr>
               <td class="stats-hide">
                  <a href="#" onclick="hideStats();">Hide</a>
               </td>
               <td class="stats-show" style="display: none;">
                  <a href="#" onclick="showStats();">Show</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="stats-hide">
      <td>
        <!-- data -->
      </td>
   </tr>
</table>

And the jQuery code:

<script type="text/javascript" language="javascript">
    function hideStats() {
        hideControls(true, $('.stats-hide'));
        hideControls(false, $('.stats-show'));
    }

    function showStats() {
        hideControls(false, $('.stats-hide'));
        hideControls(true, $('.stats-show'));
    }

    function hideControls(value, arr) {
        $(arr).each(function () {
            if (value) {
                $(this).hide();
            }
            else {
                $(this).show();
            }
        });
 }
</script>

How do I implement the same behavior with one, one link and one, possibly a CSS class?

My idea is to store a boolean variable somewhere and toggle visibility relative to that variable. Is there more?

+2


a source to share


3 answers


Is the line that is hiding not working as expected in IE? What is the jQuery and browser version that is awkward?

I created an example using the switch suggested by @Galen and it works in Chrome, Firefox and Safari. I don't have access to IE.

Here's the code:

Html



<table>
   <tr>
      <td>
         <table class="data">
            <tr>
               <td class="stats-hide">
                  <a href="#" class="toggle-stats">Hide</a>
               </td>
               <td class="stats-show">
                  <a href="#" class="toggle-stats">Show</a>
               </td>
            </tr>
         </table>
      </td>
   </tr>
   <tr class="stats-hide">
      <td>
        Some Data
      </td>
   </tr>
</table>

Javascript

$(".toggle-stats").click(function() {
    $(".stats-hide, .stats-show").toggle();
});
​
+2


a source


Use the switch mentioned in the above entry, but use "tbody" instead of "tr" so that rows can be hidden / shown as needed.



+2


a source


You can use jquery toggle to alternate hiding and showing objects with one link. You don't need to store any variables.

+1


a source






More articles:


All Articles