Grow your CSS skills. Land your dream job.

[Solved] SlideToggle Trouble

  • # February 28, 2010 at 4:20 pm

    Hi Folks,

    I am trying to use slideToggle for a list. I basically have it working, except it’s a little jerky.

    What I would like is:
    Before one li opens, the other li close first with slidetoggle.

    It’s kind of a mess right now.
    I copied this js: http://css-tricks.com/snippets/
    and this: http://css-tricks.com/examples/OrganicTabs/
    put them together and came up with this: http://zipnerdz.com/residential.html

    any help would be much appreciated.

    Thanks,
    Lon :geek:

    # February 28, 2010 at 11:06 pm

    I’ve encountered this problem before. Post your javascript. I’ll edit it for you.

    # March 1, 2010 at 1:27 am

    It jumps because it slides down but fades out. Once it is done fading it snaps closed.
    Why don’t you look at using this instead:

    http://css-tricks.com/snippets/jquery/s … accordion/

    # March 1, 2010 at 1:44 am

    @noahgelman Thanks,
    Here is my current code:

    Code:
    $(function(){

    $(“#explore-nav ul”).hide();

    $(“#explore-nav li a”).not(“#explore-nav ul a”).click(function() {

    var curList = $(“#explore-nav li a.current”).attr(“rel”);

    $(this).parent().find(“ul”).stop().slideToggle(“normal”);

    // List moving to
    var $newList = $(this);

    // Set outer wrapper height to height of current inner list
    var curListHeight = $(“300″).height();
    $(“300″).height(curListHeight);

    // Remove highlighting – Add to just-clicked tab
    $(“#explore-nav li a”).removeClass(“current”);
    $newList.addClass(“current”);

    // Figure out ID of new list
    var listID = $newList.attr(“rel”);

    if (listID != curList) {

    // Fade out current list
    $(“#”+curList).fadeOut(300, function() {

    // Fade in new list on callback
    $(“#”+listID).fadeIn();

    // Adjust outer wrapper to fit new list snuggly
    var newHeight = $(“#”+listID).height();
    $(“300″).animate({
    height: newHeight
    });

    });

    }

    // Don’t behave like a regular link
    return false;
    });

    });

    @jamy_za
    Thanks, i’ll try that accordion thing

    # March 1, 2010 at 5:28 am

    I think you should rather use the snippet, but try this if you don’t want to use it.

    Code:
    $(function(){

    $(“#explore-nav ul”).hide();

    $(“#explore-nav li a”).not(“#explore-nav ul a”).click(function() {

    var curList = $(“#explore-nav li a.current”).attr(“rel”);

    $(this).parent().find(“ul”).stop().slideToggle(“normal”);

    // List moving to
    var $newList = $(this);

    // Set outer wrapper height to height of current inner list
    var curListHeight = $(“300″).height();
    $(“300″).height(curListHeight);

    // Remove highlighting – Add to just-clicked tab
    $(“#explore-nav li a”).removeClass(“current”);
    $newList.addClass(“current”);

    // Figure out ID of new list
    var listID = $newList.attr(“rel”);

    if (listID != curList) {

    // Fade out current list
    $(“#”+curList).slideUp();

    }

    // Don’t behave like a regular link
    return false;
    });

    });

    # March 1, 2010 at 11:02 am

    PROBLEM SOLVED

    Thanks jamy_za!

    Here is the test page link:
    *had to post the original page, testpage was messing with my SEO – should be updated in a couple days*
    http://zipnerdz.com/residential.html

    I’ll post the official page when all the content is written.

    Thanks again,
    Lon :geek:

Viewing 6 posts - 1 through 6 (of 6 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".