show by sliding effect HTML First Column on button click

Question

what i need is, When i click on button "Click", the Column "Delete" Should be visible and editable. and when i click on the same button "click" again, the delete column should slide right and hide behind the Column B, C and D and so on, without damaging the width of the complete table and view. Check it here.

JSfiddle Demo

 <div class="menuBtn">click</div>
    <table class="whole" border="1px">
        <tr>
            <th class="menu">Delete</th>
            <th>Data1 c</th>
            <th>date2 c</th>
        </tr>
        <tr>
            <td class="menu">
                <input type="checkbox" value="Bike">
            </td>
            <td>data</td>
            <td>date1</td>
        </tr>
        <tr>
            <td class="menu">
                <input type="checkbox" value="car">
            </td>
            <td>data2</td>
            <td>date3</td>
        </tr>
    </table>

JS

$('.menuBtn').click(function (event) {
    value = $('.whole').css('right') === '-100px' ? 0 : '-100px';
    $('.whole').animate({
        right: value
    });
});

CSS:

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 0;
}

This is a good question! It would be possible if you use divs instead of table elements, so create a table with divs, it's a bit of a pain in the ass but that's how I think you can get this done. — odedta, Aug 18 '15 at 08:22
You can try changing the width of the first row and in the same time to move the table to the right.. — Mihai Matei, Aug 18 '15 at 08:24
@odedta am trying to create a grid where the data is fetched and updated based on the column selected so i have a limitation — , Aug 18 '15 at 08:26
If you really want to use table u can try to play with `display:flex `http://jsfiddle.net/Abs5H/872/. But it's kinda nonsense to doing it with tables (otherwise u have to). — Skodsgn, Aug 18 '15 at 08:30
@Scott i have seen the hide show but can't it be happen by sliding effect only the delete column with the check box should be visible when the user clicks on button by making the slide effect on others as moving — , Aug 18 '15 at 08:31
@Sko i want to slide the delete column which has the text box not the row FYI: the entire remaining column should be slided and the delete column should be visible — , Aug 18 '15 at 08:33
Do you want something like that instead: http://jsfiddle.net/rn6knb1u/3 ? — A. Wolff, Aug 18 '15 at 08:36
@A.Wolff i want something like this but what i have done is not right can u help me on this http://jsfiddle.net/Abs5H/871/#&togetherjs=JF5FAryr0C — , Aug 18 '15 at 08:43
@A.Wolff To be more clear, what i need is, When i click on button "Click", the Column "Delete" Should be visible and editable. and when i click on the same button "click" again, the delete column should slide and hide, without damaging the width of the complete table and view. Check it here. http://jsfiddle.net/Abs5H/871/#&togetherjs=JF5FAryr0C — , Aug 18 '15 at 08:48
@A.Wolff absolutely you are correct now can it be improvised and the delete should not be visible on fight site — , Aug 18 '15 at 08:59
@HimeshAadeshara huff was expecting the same thanks but the animation is too fast don't u feel — , Aug 18 '15 at 09:09

score 0 · Answer 1 · answered Aug 18 '15 at 08:36

0

May be you could change the display type of row from table-row to block or inline-block. and then apply any animations. it will work. However you will have to adjust the width yourself then. which shouldn't be as difficult with JS.

answered Aug 18 '15 at 08:36

Tarandeep Singh

1,322
16
16

score 0 · Answer 2 · answered Aug 18 '15 at 08:41

Forgive me if this looks dirty to you, but you can give it a try.

$('.menuBtn').click(function (event) {

    if(jQuery('table.fixed-row').length > 0){
      jQuery('table.fixed-row').remove();
    }
    var $table = jQuery('table.whole');
    var $fixedtr = $table.clone().insertBefore($table).addClass('fixed-row');
    $fixedtr.find('tr:not(:first-child)').remove();

    jQuery('table.whole tr:first-child').css('display','none');
    jQuery('table.whole.fixed-row tr:first-child').css('display','table-row');
    value = $('.whole').css('right') === '-100px' ? 0 : '-100px';
    $('.whole.fixed-row').animate({
        right: value
    });

});

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 0;
}

.whole span {
    position: relative;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="menuBtn">click</div>
<table class="whole" border="1px">
    <tr>
        <th class="menu">Delete</th>
        <th>Data1 c</th>
        <th>date2 c</th>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="Bike">
        </td>
        <td>data</td>
        <td>date1</td>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="car">
        </td>
        <td>data2</td>
        <td>date3</td>
    </tr>
</table>

Looks good, what i need is, When i click on button "Click", the Column "Delete" Should be visible and editable. and when i click on the same button "click" again, the delete column should slide and hide, without damaging the width of the complete table and view. Check it here. jsfiddle.net/Abs5H/871/#&togetherjs=JF5FAryr0C — , Aug 18 '15 at 08:51

score 0 · Answer 3 · answered Aug 18 '15 at 09:05

I thought I remembered seeing a toggle method that you could toggle between but I can't remember where I saw it now so I'll do an alternative for you :)

$('.menuBtn').click(function(e){
    e.preventDeafult();
    var direction=($('.whole').hasClass('out'))?"+=100px":"-=100px";
    $('.whole').animate({'right':direction},500,function(){if(!$(this).hasClass('out'))$(this).addClass('out');else $(this).removeClass('out');});
});

But as stated above by others I don't think table rows are able to be positioned in that way? Other ways is to use slideIn() or use width instead? There are many ways. Good luck!

score 0 · Accepted Answer · answered Aug 18 '15 at 09:09

hi pauli please look if you want is this or what.?

var h = false;
$('.menuBtn').click(function (event) {
    if(h == false){        
     $('.menu').each(function(){$(this).toggle( "slow", function() { left: "0" });});
    }else{
        $('.menu').each(function(){$(this).toggle( "slow", function() { left: "50" });});
    }    
});

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 50;
    display: none;
}

<div class="menuBtn">click</div>
<table class="whole" border="1px">
    <tr>
        <th class="menu">Delete</th>
        <th>Data1 c</th>
        <th>date2 c</th>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="Bike">
        </td>
        <td>data</td>
        <td>date1</td>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="car">
        </td>
        <td>data2</td>
        <td>date3</td>
    </tr>
</table>

here is the demo working code

Demo Working code

i did was expecting the same thanks for your support can't the animation be a bit slow while sliding up — , Aug 18 '15 at 09:11

score 0 · Answer 5 · answered Aug 18 '15 at 09:23

Table are hard to animate. In my opinion, you should use CSS transition and toggling a class. Here is an example:

$('.menuBtn').click(function (event) {
    $('.menu').toggleClass('slided');
});

.whole {
    position: relative;
    Width:100%;
}
.menu {
    left: 0;
}
.whole .menu {
    max-width: 0;
    overflow: hidden;
    background: red;
    text-indent: -10%;    
    transition: all 1s;
}

.whole .menu.slided {
    max-width: 100px;
    text-indent: 0;
    background: transparent;
    transition: all 1s;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="menuBtn">click</div>
<table class="whole" border="1px">
    <tr>
        <th class="menu">Delete</th>
        <th>Data1 c</th>
        <th>date2 c</th>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="Bike">
        </td>
        <td>data</td>
        <td>date1</td>
    </tr>
    <tr>
        <td class="menu">
            <input type="checkbox" value="car">
        </td>
        <td>data2</td>
        <td>date3</td>
    </tr>
</table>

Thanks for your support but i want the entire column to be hidden — , Aug 18 '15 at 09:29

show by sliding effect HTML First Column on button click

5 Answers5