Forums

AlexFrais

Hey guys,

I am building an accordion for my blog and everything works fine except for one little thing. Whenever I put a link into one of the boxes, the accordion slides back up instead of following through with the link. The only time I want this accordion to work is when .heading is clicked. Here is the jQuery code:


 $(document).ready(function() {
	$('.heading').click(function() {
		if($(this).parent().hasClass('current')) {
			$(this).siblings('ul').slideUp('slow',function() {
				$(this).parent().removeClass('current');
				$.scrollTo('#accordion',1000);
			});
		} else {
			$('ul#accordion li.current ul').slideUp('slow',function() {
				$(this).parent().removeClass('current');
			});
			$(this).siblings('ul').slideToggle('slow',function() {
				$(this).parent().toggleClass('current');
			});
			$.scrollTo('#accordion',1000);
		}
		return false;
	});
});

If it matters at all, I followed the [ulr=]http://net.tutsplus.com/tutorials/javascript-ajax/exactly-how-to-create-a-custom-jquery-accordion/]tutorial here at Nettuts[/URL], but they do not account for this issue!

If it helps at all, here is the HTML to go along with it:


	<ul id=\"accordion\">
		<li id=\"rss\">
			<a href=\"#rss\" class=\"heading\"><span class=\"title\">Subscribe</span> <span class=\"icon\"></span></a>
			<ul>
				<li>
					<!--- extra content --->
				</li>
			</ul>
		</li>
		<li id=\"newsletter\">
			<!--- extra content --->
		</li>
		<li id=\"twitter\">
			<a href=\"#twitter\" class=\"heading\"><span class=\"title\">Twitter</span> <span class=\"icon\"></span></a>
			<ul>
				<li>
					<p><a href=\"http://twitter.com/Blogussion/\">Follow us now</a>!</p>
				</li>
			</ul>
		</li>
	</ul>

Really appreciate any help! You guys were quick to help me with my last problem and I can't tell you enough how much I appreciate it. :D

treehouse : what would you like to learn today?

Forums

Any link clicked collapses accordion [jQuery]