Show and hide table column using jQuery


Tags: javascript,jquery,html,css

Problem :

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;
}


Solution :

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>


    CSS Howto..

    how to change color of selected menu in css or jquery [closed]

    How do I make my mobile website auto-adjust its screen resolution?

    How to shrink the width size hyperlink?

    How to use box shadow in css?

    In CSS, how to not float a 300px wide Div to the next line?

    How to change checkbox's border style in CSS?

    How to expand input field to 100% of the parent

    How do I line up CSS elements? Is there a tool I can use?

    how you can change the style of the page without changing CSS files?

    asp.net mvc view css not showing as expected

    CSS: how to do away with automatic rescaling of font-size on Safari

    How to use css to keep horizontal visible when vertical is auto?

    How do I apply properties to a previous sibling on hover?

    Showing an hidden element with an opacity-animation

    How to eliminate an annoying blue line in a border area of a hyperlink / h2 class with CSS

    How to properly align two elements in CSS

    How to target table with ID?

    How to reveal part of blurred image where mouse is hovered?

    Shows a dropdown element with jQuery

    Track cursor hover position and show hide menu similar to OSX dock / Windows start bar

    How do I display the first image from each div with .className?

    How do you position CSS elements directly under each other?

    css3 pure: how to hover an element outside?

    how to Styling a “choose file” button using css Only

    CSS: How do I shrink a div to beyond a font's invisible padding?

    How can I make the background of an HTML div black?

    how to conditionally transform div to and from a state on multiple presses of same button

    How to display a line between the items of an unorderer list that have random number of li every time

    How to select all fieldsets in a form except the first one?

    How to edit a pseudo element on focus using css or jQuery