SitePoint Sponsor

User Tag List

Results 1 to 13 of 13
  1. #1
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question How to SlideToggle

    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>

    </tr>
    </tbody>
    <tbody class="mytbody3">
    <tr>
    <td>row3 </td>
    <td>row4</td>
    <td>row5</td>
    <td>row6</td>

    </tr>
    </tbody>
    </table>
    </div>
    </body>
    </html>

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    You should be able to achieve that by changing the .show() to .toggle() instead.

    Code javascript:
    $('.mytbody3').toggle();
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jesh View Post
    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.
    Wouldn't using slideToggle instead of toggle achieve that?
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    Wouldn't using slideToggle instead of toggle achieve that?
    The problem is I am not sure on how? I am working, pros and cons with lot of search.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jesh View Post
    The problem is I am not sure on how?
    Not sure on how? Instead of .toggle(), you use .slideToggle() - it should be as easy as that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Last edited by Jesh; May 3, 2013 at 18:36. Reason: removed icon

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Last edited by paul_wilkins; May 3, 2013 at 18:40. Reason: replaced awful test code techniques with better ones
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by paul_wilkins View Post
    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.
    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. #11
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jesh View Post
    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.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  12. #12
    SitePoint Member
    Join Date
    May 2013
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #13
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,700
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by Jesh View Post
    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?
    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:
    Code javascript:
    // 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);
            });
        });
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •