PDA

View Full Version : jQuery Accordion Menu



jickpictures
10-25-2010, 12:13 AM
I have a simple horizontal accordion menu on my website: http://www.jickpictures.com/preview

When you click on the black buttons (with white text on top) at the top or bottom, text either slides out to the left or the right.

I want the user to be able to click these buttons again and the text retracts back into the button and stays there. You can see it begins to do that, but then just slides back out again and I'm at a stand still.

If anyone can help me out it would be greatly appreciated, I'm struggling.

Thank you
Ryan

jscheuer1
10-26-2010, 05:41 PM
Markup has changed slightly. Mostly this is for validation. An on page stylesheet was added to assist in this. Its selector and rules may replace #line and its rules in your external stylesheet. Other minor corrections. But I also added the data-width attribute to one of the triggers for functionality. You may make the two on page scripts external. Any questions, just ask:


<!DOCTYPE html>
<html>
<head>
<meta name="keywords" content="Jick Pictures, Jick, jickpictures.com, Video Graphic Design, Video Film">
<meta name="title" content="Jick Pictures | When Keeping It Real Goes Wrong" />
<meta name="description" content="Short movies for short attention spans." />
<link rel="image_src" href="http://b.vimeocdn.com/ts/948/252/94825209_200.jpg" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Jick | Short movies for short attention spans</title>
<link rel="alternate" type="application/rss+xml" title="RSS" href="feed://www.jickpictures.com/blog2/?feed=rss2" />
<link REL="SHORTCUT ICON" HREF="http://www.jickpictures.com/favicon.ico">
<link href="site/css/index.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.line {
background-image: url(/preview/site/images/line.png);
margin: 0 auto;
width: 1000px;
height: 1px;
}
</style>
<script type='text/javascript' src='site/scripts/jquery-1.4.2.min.js'></script>
<script type="text/javascript">
(function($){
$.fn.extend({
haccordion: function(params){
params = $.extend({
//defaults:
speed: 500,
headerclass: "header",
contentclass: "content",
contentwidth: 500
}, params);
var hac = this.find('div.' + params.contentclass);

return this.each(function(){
$('div.' + params.headerclass, this).click(function(){
var content = $(this).next('div.' + params.contentclass);
if(content.css('width') !== '0px'){
content.animate({width: 0}, params.speed);
} else {
hac.not(content).animate({width: 0}, params.speed);
content.animate({width: (content.attr('data-width') || params.contentwidth)}, params.speed);
}
});
});
}
});
})(jQuery);
</script>
<script type="text/javascript">
jQuery(function($){
$(".haccordion").haccordion({contentwidth: 220});
$(".haccordion2").haccordion({headerclass: "header2", contentclass: "content2"});
});
</script>
</head>

<body>
<div id="wrapper">
<div id="content">
<div id="top">

<a id="logo" href="#"></a>
<div id="menucontainer">
<div class="haccordion">
<div class="header"><img src="site/images/menubutton.png"/></div>
<div class="content"><a class="topmenu" href="#">Jick Pictures</a><a class="topmenu" href="#">Blog</a><a class="topmenu" href="#">Hit us up</a></div>
</div>
</div>

</div>
<div class="line"></div>
<div id="movie"><iframe src="http://player.vimeo.com/video/15676240?byline=0&amp;portrait=0&amp;color=ffffff" style="width: 1000px; height: 563px; border-width: 0"></iframe></div>
<div class="line"></div>
<div id="bottom">
<div class="haccordion2">
<div class="header2"><img src="site/images/sharebutton.png"/></div>
<div class="content2" data-width="260"><a class="bottommenu" href="#">Facebook</a><a class="bottommenu" href="#">Twitter</a><a class="bottommenu" href="#">Digg</a><a class="bottommenu" href="#">Email</a></div>

<div class="header2"><img src="site/images/flicksbutton.png"/></div>
<div class="content2"><a class="inprogress" href="#">Slick</a><a class="bottommenu" href="#">When Keeping It Real Goes Wrong</a><a class="bottommenu" href="#">The Magic Shoes</a><a class="bottommenu" href="#">More...</a></div>
</div>
</div>
<div id="spacer"></div>
</div>
</div>

</body>
</html>

jickpictures
10-26-2010, 07:47 PM
You're amazing. Thank you so much for getting back to me. That worked perfectly.