[Solved] SlideToggle Trouble

[zipnerdz]

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: https://css-tricks.com/snippets/
and this: https://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:

[noahgelman]

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

[zipnerdz]

@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

[zipnerdz]

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:

[Author]

Posts