How to SlideToggle

JavaScript
1

Hi,

Below i have posted the code for my Question.On clicking the anchor link, it does toggle. but the class"mytbody3"should hide on anchor link sliding down. i understand, an if condition should solve this but with limited jQuery coding knowledge, i am not sure how to write it. can someone help with this.

Thanks.

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=“http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=UTF-8” />
<title>Untitled Document</title>
<script type=“text/javascript” src=“jquery-1.4.2.min.js”></script>

<script>

jQuery(document).ready(function(){
$(‘.mytbody1’).show();

$('.mytbody3').hide();

$('.mytbody2').live('click', function () {
    
$('.mytbody1').slideToggle();
//$('.mytbody1').slideUp();

$('.mytbody3').show();

// $(‘.mytbody1’).slideDown();
//$(‘.mytbody3’).hide();

});

});

</script>

<style>
mytbody1
{
color:#00467F;
}

.mytbody3
{
color:#751590;
/* display:none; */

}
</style>

</head>

<body>

<div class=“my class”>
<table class=“mytableclass”>
<thead>
<th>firstheader</th>
<th>secondheader</th>
</thead>
<tbody class=“mytbody1”>
<tr>
<td>row1</td>
<td>row2</td>
</tr>
</tbody>
<tbody class=“mytbody2”>
<tr>
<td><a href=“#” >click me</a> </td>

        &lt;/tr&gt;
    &lt;/tbody&gt;
    &lt;tbody class="mytbody3"&gt;
        &lt;tr&gt;
            &lt;td&gt;row3 &lt;/td&gt;
            &lt;td&gt;row4&lt;/td&gt;
            &lt;td&gt;row5&lt;/td&gt;
            &lt;td&gt;row6&lt;/td&gt;
            
        &lt;/tr&gt;
    &lt;/tbody&gt;
&lt;/table&gt;

</div>
</body>
</html>

2

You should be able to achieve that by changing the .show() to .toggle() instead.


$('.mytbody3').toggle();
3

Thanks Paul.
I have one more task similar to this.
can you demonstrate this with slideUp and slidDown functionality and animate the sliding for few seconds.
That is of great help as these are the functionalities that I am handling now.

Thanks,
Jesh

4

I need the animate effect, as it slides up , the tbody3 should gradually show …come up and vice versa.
I am working on it. Meanwhile, if I get code , that’s of great help.

5

Wouldn’t using slideToggle instead of toggle achieve that?

6

The problem is I am not sure on how? I am working, pros and cons with lot of search.

7

Not sure on how? Instead of .toggle(), you use .slideToggle() - it should be as easy as that.

8

ok…after going through few articles, documentation and examples, tried various ways.

$(‘.mytbody1’).animate{(“height:toggle”,“duration:slow”)};
$(‘.mytbody3’).animate{(“height:toggle”,“duration:slow”)};

this works when it is div classes tags and not for the classes inside table.

i also tried to work this way,
$(‘a#tableanchor’).toggle(
function()
{
$(‘.mytbody1’).animate({
height: “toggle”,
top:“-10px”,

 //bottom:"0",

},500);
},
function()
{
$(‘.mytbody1’).animate({
height: “toggle”,
// duration:“slow”

  },500);

});

slideToggle() is not achieving it. dont’ know why.

giving,
$(‘.mytbody1’).toggle(); //this is what works. giving $(‘.mytbody1’).slideToggle(); makes the mytbody3 to appear first and then toggles up. so changed slideToggle to toggle.
$(‘.mytbody3’).toggle();

actually the above two lines toggles perfect but i need gradual sliding. i also tried with slideUp, it slidesUp but not gradually. i messing/missing something.

once again i put my question here:
.mytbody1 slides up gradually and hides while .mytbody3 comes out gradually and shows and vice versa on clicking the anchor link. the link also goes up and down as per the sliding.

i am making some mistakes in jQuery and not able to identfify the correct syntax. will try to give an working external link.
Any help is highly appreciated. got to finish this. any working example would be great.

Thanks.

9

Tables cause problems when it comes to animating things like that. See for example some test code at http://jsfiddle.net/pmw57/yZP7s/
The table row only animates to the minimum height of the row. Beyond that, the row just hides itself.

You may have much greater success with the sliding animation by not using tables for layout - which is a big no-no, and instead use divs and some CSS to achieve the layout.

10

hey paul, i am stuck here and i need to fix this. it’s going to be table. so there is not going to be any other layout. cannot call jquery inside html(not in content). will calling .td or .tr. or using .parent().child()…some syntax using this will work? if so, how i should write it. i have been seeing lot of these syntax while search.

thanks.

11

If you’re stuck with tables, then you will also be stuck with the layout requirements - the min-height row requirements - that table rows have too.

I have no solution for you there in regard to tables.

12

Hi,

One more question,

The anchor text has to change as it slides up and down in the code that i posted at the start.How will I achieve it?

Thanks.

13

A good way to do that is to wait until the slideToggle has finished, and then check if what you are sliding is visible.
You can the set the text to what you want it to be, based on whether things are visible or not. For example:


// Why slideToggle is not good for table rows
$(function () {
    $('#clickme').on('click', function () {
        var button = this;
        $('#row1').slideToggle(500, function () {
            var isVisible = $(this).is(':visible'),
                text = isVisible ? 'Slide up' : 'Slide down';
            
            $(button).html(text);
        });
    });
});