How to hide the rest of the contents using simple CSS and Javascript

Question

My question is very simple. I want to display only the content of one tr at a time. That means when I click on the other tr then the other opened tr should get closed.

My code is as below

<head>

    <style>
      p { width:400px; }
      .click{cursor:pointer;}
    </style>


    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    <script>
    function visibility(id) {

        var e = document.getElementById(id);
        if(e.style.display == 'none')
          e.style.display = 'block';
        else
          e.style.display = 'none';
    }
    </script>
</head>

Above is the head section where onClick a function called visibility is getting called. Below in the body section I am trying to display two tr using for loop.

<body>
<table>
<?php
$i=2;
for($i = 1; $i <= 2; $i++)
{
?>
    <tr class="click <?php echo $i; ?>" onClick="visibility('<?php echo $i; ?>');">
        <td>Click <?php echo $i; ?></td>
    </tr>
    <tr id="<?php echo $i; ?>" style="display:none;">
        <td>This is a paragraph <?php echo $i; ?></td>
    </tr>
<?php
}
?>
</table>
</body>

I am unable to get the desired result(That means only one tr should be visible at a time). There are many existing Jquery plugins available but I do not want to use them as it will increase the load on my web page and so much of customization will be required. I am almost done and hoping to get the desired result with the help from you all. Thanks in advance

You have two rows for each loop ... Which you want to show...?? — Prasath K
– Prasath K, Commented May 7, 2013 at 8:39
Say I have two rows 1 and 2. If I am clicking on 1 then it should show the content of 1 and when I am clicking on 2 then it should show the content of 2. Its happening very properly at the moment. To hide the previously opened row, I've to click on that particular row. But I want it to get hidden as soon as I click on the other row. — Shashi Roy
– Shashi Roy, Commented May 7, 2013 at 8:43

billyonecan · Accepted Answer · 2013-05-07 08:40:16Z

2

Bind a click handler to your tr.click elements, show the corresponding content, and hide the others:

$(this).next('tr').show().siblings().not('tr.click').hide();

Here's a fiddle

answered May 7, 2013 at 8:40

billyonecan

20.3k9 gold badges44 silver badges66 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Adder Over a year ago

That is much shorter than my solution :)

Shashi Roy Over a year ago

Hi Billyonecan, I'll just try out your code. I think it should give me my desired result.

Adder · Accepted Answer · 2013-05-07 08:41:26Z

0

You need to set the display to table-row value when displaying the "tr" element. Let's make use of jQuery.

 $(document).on('click', '.clickablerows', function() {
     $('.showablerows').css('display','none');
     var showee = $(this).data('showee');
     $(showee).css('display','table-row');
     return false;
 });

edited May 7, 2013 at 8:41

answered May 7, 2013 at 8:31

Adder

5,8982 gold badges35 silver badges60 bronze badges

1 Comment

Shashi Roy Over a year ago

Thanks for the quick response. can you give me one small example please.

Seimen · Accepted Answer · 2013-05-07 08:49:05Z

0

I'd add/remove a class and handle the visibility state through that so you have more control over what happens with the active/inactive elements (plus you don't have to care if one of the siblings is the clicked element). Also you can use the event delegation of .on() to save some time attaching the event handler.

jsfiddle

JS

var activeClass = 'active';

$('table').on('click', '.click', function() {
   $(this).next().addClass(activeClass).siblings().removeClass(activeClass);
});

CSS

td {
    display: none;
}

.active td {
    display: table-cell;
}

answered May 7, 2013 at 8:49

Seimen

7,2942 gold badges30 silver badges42 bronze badges

Comments

tech savy · Accepted Answer · 2013-05-10 09:37:32Z

0

first set class name "test" for all td's

then use this code

$(".test").click(function(){

$(".test").hide(); $(this).show();

});

answered May 10, 2013 at 9:37

tech savy

1931 silver badge6 bronze badges

Collectives™ on Stack Overflow

How to hide the rest of the contents using simple CSS and Javascript

4 Answers 4

Here's a fiddle

2 Comments

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related