Show and hide table column using jQuery

Question

I came across this fiddle from a SO answer, that hides a table column once a button is clicked. What i want is the absolute opposite. I want it to be hidden by default, and then show and hide (toggle) when i click a button.

How can i achieve this?

Here's the fiddle:

FIDDLE

HTML:

<table id="foo">
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
<tr><td>1</td><td>2</td><td>3</td><td>4</td></tr>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>

CSS:

#foo td {
padding: 1em;
border: 1px solid black;
}

#foo.hide2 tr > *:nth-child(2) {
    display: none;
}

Do the opposite man.. Hide the columns when you create it. On the click event show it. — Anoop LL
– Anoop LL, Commented Aug 22, 2016 at 11:20

Pranav C Balan · Accepted Answer · 2016-08-22 11:40:10Z

2

Set the hide2 class initially to the element or execute the toggle statement once.

#foo td {
  padding: 1em;
  border: 1px solid black;
}
#foo.hide2 tr > td:nth-child(2) {
  display: none;
}

<table id="foo" class="hide2">
  <!------------^^^^^^^^^^^-->
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
  </tr>
</table>
<button onclick='document.getElementById("foo").classList.toggle("hide2")'>Click me</button>

edited Aug 22, 2016 at 11:40

answered Aug 22, 2016 at 11:20

Pranav C Balan

115k25 gold badges173 silver badges195 bronze badges

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

4 Comments

laker001 Over a year ago

Thanks! i was thinking it was something more complex, turns out adding the class solve it!

laker001 Over a year ago

One question: if i want to show it when clicking a button, and then hide it again when clicking another button, how can i do it ?

Pranav C Balan Over a year ago

@laker001 : use ...classList.add('hide2'); for hiding and ...classList.remove('hide2'); for showing :)

Pranav C Balan Over a year ago

@laker001 : glad to help

grec0o · Accepted Answer · 2016-08-22 11:31:45Z

1

I know how to do it with JQuery adding this line.

$('td:nth-child(2)').hide();

http://jsfiddle.net/bnDVS/609/

And with CSS add it:

#foo td:nth-child(2) { display: none;}

And change it:

#foo.hide2 tr > td:nth-child(2) {
    display: none;
}

To:

#foo.hide2 tr > td:nth-child(2) {
    display: table-cell;
}

http://jsfiddle.net/bnDVS/610/

answered Aug 22, 2016 at 11:31

grec0o

1001 silver badge6 bronze badges

Collectives™ on Stack Overflow

Show and hide table column using jQuery

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related