How to apply smooth show/hide effect with slideToggle on jQuery

Question

I am trying to do show hide content with slideToggle and it is wokign but I am not getting smooth animation effect on my table.

I have tryied with this two code but now getting proper animation effect:

$('.more').slideToggle('fast');
$('.more').stop().slideToggle(500);

Any idea how to do that?

Thanks.

Here is my jQuery code work:

$('#more').click(function () {
    $(this).text('See less');
    if ($('.more').is(':visible')) {
        $(this).text('See more');
    } else {
        $(this).text('See less');
    }
    //$('.more').slideToggle('fast');
    $('.more').stop().slideToggle(500);
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<a href="#" id="more">More about us</a>

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Address</th>
            <th>Rooms</th>
            <th>SQM</th>
            <th>Floor</th>
            <th>Parking</th>
            <th class="price">Price</th>
            <th>PpM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-name="Date">5/12/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">1</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">1,410,000</td>
            <td data-name="PpM">40,286</td>
        </tr>
        <tr class="active">
            <td data-name="Date">13/05/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">13/05/14</td>
            <td data-name="PpM">44,000</td>
        </tr>
        <tr class="more">
            <td data-name="Date">18/08/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">6</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,600,000</td>
            <td data-name="PpM">45,714</td>
        </tr>
        <tr class="more">
            <td data-name="Date">14/09/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">4</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,375,000</td>
            <td data-name="PpM">39,286</td>
        </tr>
        <tr class="more">
            <td data-name="Date">25/01/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,680,000</td>
            <td data-name="PpM">28,966</td>
        </tr>
    </tbody>
</table>

use `div` instead on `table td`... animation won't work in `td` because `table tr` does not support height property so hide/show effect will show only — Girish, Dec 16 '14 at 11:17

score 1 · Accepted Answer · answered Dec 16 '14 at 10:55

simply change this:

$('.more').stop().slideToggle(10);// to show effect faster use small value.

$('#more').click(function () {
    $(this).text('See less');
    if ($('.more').is(':visible')) {
        $(this).text('See more');
    } else {
        $(this).text('See less');
    }
    //$('.more').slideToggle('fast');
    $('.more').stop().slideToggle(10);
    return false;
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="#" id="more">More about us</a>

<table>
    <thead>
        <tr>
            <th>Date</th>
            <th>Address</th>
            <th>Rooms</th>
            <th>SQM</th>
            <th>Floor</th>
            <th>Parking</th>
            <th class="price">Price</th>
            <th>PpM</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td data-name="Date">5/12/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">1</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">1,410,000</td>
            <td data-name="PpM">40,286</td>
        </tr>
        <tr class="active">
            <td data-name="Date">13/05/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">1</td>
            <td data-name="Price">13/05/14</td>
            <td data-name="PpM">44,000</td>
        </tr>
        <tr class="more">
            <td data-name="Date">18/08/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">6</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,600,000</td>
            <td data-name="PpM">45,714</td>
        </tr>
        <tr class="more">
            <td data-name="Date">14/09/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">4</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,375,000</td>
            <td data-name="PpM">39,286</td>
        </tr>
        <tr class="more">
            <td data-name="Date">25/01/14</td>
            <td data-name="Address">Alenby 50, Tel Aviv</td>
            <td data-name="Rooms">1.5</td>
            <td data-name="SQM">32</td>
            <td data-name="Floor">2</td>
            <td data-name="Parking">&nbsp;</td>
            <td data-name="Price">1,680,000</td>
            <td data-name="PpM">28,966</td>
        </tr>
    </tbody>
</table>

score 0 · Answer 2 · answered Dec 16 '14 at 10:57

0

The best is what you can do is make a table out of div's.

answered Dec 16 '14 at 10:57

DevJoeri

61
10

score 0 · Answer 3 · answered Dec 16 '14 at 11:04

0

Like DevJoeri I would suggest you to use DIVs but if you don't want to or can't. Adding the folowing css rules helped on your example

tr {
    float: left;
    width: 100%;
}

answered Dec 16 '14 at 11:04

Matej Žvan

758
4
13

score 0 · Answer 4 · edited May 23 '17 at 12:31

0

please check this link

You cannot apply toggle animation to td,tr tag it can be applied only on div tag

edited May 23 '17 at 12:31

Community

1
1

answered Dec 16 '14 at 11:12

vivek

71
4

i am giving answer here,i am not asking or refering to a link it is my answer. – vivek Dec 16 '14 at 12:14

How to apply smooth show/hide effect with slideToggle on jQuery

4 Answers4