CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Nicero
Nicero

Reputation: 4377

Hide / show dynamically generated table columns with right / left animation

I'm working on the following - working - code:

See it on JsFiddle

The HTML is dynamically generated from a XML file which is transformed to HTML by a XSL file. Due to the fact that the number of columns my vary, I used the :nth-child in the JQuery code to hide/show the columns by clicking the relative checkbox.

As I'm not very good with JQuery I'm stuck on the animation part. I would like to add an animation to the hide/show action, for example that the checked/unchecked column appears and disappears from left to right.

body {
    font-size: 9pt;
    font-family: arial;
    padding: 0px;
    margin: 0px;
}
.htable {
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid black;
    margin: 0 auto 0 auto;
}
.htable tr, th, td {
    border: 1px solid black;
}
.ctable {
    border-spacing: 0;
    border-collapse: collapse;
    border: 1px solid black;
    margin: 0 auto 0 auto;
}

<body>
        <table class="htable">
            <thead>
                <tr>
                    <th>GoPro 1</th>
                    <th>GoPro 2</th>
                    <th>GoPro 3</th>
                    <th>GoPro 4</th>
                </tr>
                <tr>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                    <th>
                        <input checked="checked" type="checkbox">
                    </th>
                </tr>
            </thead>
        </table>
        <table class="ctable">
            <thead>
                <tr>
                    <th></th>
                    <th colspan="1">GoPro 1</th>
                    <th colspan="1">GoPro 2</th>
                    <th colspan="1">GoPro 3</th>
                    <th colspan="1">GoPro 4</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <th class="separator">Video resolution</th>
                    <td class="values odd separator">4K</td>
                    <td class="values odd separator">4K</td>
                    <td class="values odd separator">4K</td>
                    <td class="values odd separator">4K</td>
                </tr>
                <tr>
                    <th></th>
                    <td class="values odd">Ultra wide</td>
                    <td class="values odd">Ultra wide</td>
                    <td class="values odd">Ultra wide</td>
                    <td class="values odd">Ultra wide</td>
                </tr>
                <tr>
                    <th></th>
                    <td class="values odd">3840x2160</td>
                    <td class="values odd">3840x2160</td>
                    <td class="values odd">3840x2160</td>
                    <td class="values odd">3840x2160</td>
                </tr>
                </tr>
            </tbody>
        </table>
      <script type="text/javascript">
          $(document).ready(function(){

                /* Show hide columns */
                var f = function() {
                        var index = $(":checkbox").index(this) + 2;
                        $(".ctable > * > * > :nth-child(" + index + ")").toggle(this.checked);
                };

                $(":checkbox").click(f).each(f);
            });
      </script>
</body>

Upvotes: 0

Views: 1721

Answers (2)

you-rick
you-rick

Reputation: 185

You can try something like this

DEMO http://jsfiddle.net/cdcjy1mg/7/

 $(".ctable > * > * > :nth-child(" + index + ")").toggleClass('hidden');

CSS

.hidden {
   width: 0;
    opacity: 0;
    font-size: 0;
    padding: 0;
    margin: 0;
    border: 0;
}

.htable tr, th, td {
    border: 1px solid black;
    width: 100px;
    transition: all 0.3s ease-in-out;
    opacity: 1;
    border-collapse: collapse;
    padding: 0;
    margin: 0;

}

Upvotes: 1

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

How about this ? http://jsfiddle.net/cdcjy1mg/2/

$(".ctable > * > * > :nth-child(" + index + ")").toggle("slow");

You can put the animation you want. Take a look at jquery effect.

Hope this help.

Upvotes: 1

Related Questions