Current location: Hot Scripts Forums » General Web Coding » JavaScript » jQuery Accordion Menu


jQuery Accordion Menu

Reply
 
LinkBack Thread Tools Display Modes
  #1 (permalink)  
Old 10-24-10, 03:54 PM
jickpictures jickpictures is offline
Newbie Coder
  
Join Date: Jul 2010
Posts: 12
Thanks: 4
Thanked 0 Times in 0 Posts
Unhappy jQuery Accordion Menu
I have a simple horizontal accordion menu on my website: Jick | Short movies for short attention spans.

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
Reply With Quote
  #2 (permalink)  
Old 10-25-10, 12:59 AM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
This Javascript will work for the top menu but each bottom menu will need it's own function.
And each bottom menu function will need to check if any bottom menus are opened and close them.

Code for top menu:
Code:
jQuery.fn.extend({
  haccordion: function(params)
  {
   var jQ = jQuery;
   var params = jQ.extend({
    speed: 500,headerclass: "header",contentclass: "content",contentwidth: 220},params);
    return this.each(function()
    {
     jQ("."+params.headerclass,this).click(function()
     {
      var p = jQ(this).parent()[0];
      if(sw == 1){p.opened = this;jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);}
      if(p.opened != "undefined" && sw != 1){jQ(p.opened).next("div."+params.contentclass).animate({width: "0px"},params.speed);p.opened = "undefined";}
      else{p.opened = this;jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);sw = 0;}
      });
    });
   }
 });
Code for bottom menu:
Code:
jQuery.fn.extend({
  haccordion2: function(params)
  {
   var jQ = jQuery;
   var params = jQ.extend({
    speed: 500,headerclass: "header2",contentclass: "content2",contentwidth: 500},params);
    return this.each(function()
    {
     jQ("."+params.headerclass,this).click(function()
     {
      var p = jQ(this).parent()[0];
      if(sw1 == 1){p.opened = this;jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);}
      if(p.opened != "undefined" && sw1 != 1){jQ(p.opened).next("div."+params.contentclass).animate({width: "0px"},params.speed);p.opened = "undefined"}
      else{p.opened = this;jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);sw1 = 0;}
      });
    });
  }
});
Also the variables sw and sw1 need to be global.
You do that by putting them in the main page.
HTML Code:
<!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" />

<script type='text/javascript' src='site/scripts/jquery-1.4.2.min.js'></script>
<script type="text/javascript" src="site/scripts/jquery.topmenu.js"></script>

<script type="text/javascript" src="site/scripts/jquery.bottommenu.js"></script>
    <script type="text/javascript">
       var sw = sw1 = 1;
        $(function(){
            $(".haccordion").haccordion();
        });
    
        $(function(){
            $(".haccordion2").haccordion2();
        });
    </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 id="line"></div>
        <div id="movie"><iframe src="http://player.vimeo.com/video/15676240?byline=0&amp;portrait=0&amp;color=ffffff" width="1000" height="563" frameborder="0"></iframe></div>
        <div id="line"></div>
        <div id="bottom">
            <div class="haccordion2">
                  <div class="header2"><img src="site/images/sharebutton.png"/></div>
                  <div class="content2"><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>
__________________
Jerry Broughton
Last edited by job0107; 10-25-10 at 01:05 AM.
Reply With Quote
The Following User Says Thank You to job0107 For This Useful Post:
jickpictures (10-25-10)
  #3 (permalink)  
Old 10-25-10, 03:16 AM
jickpictures jickpictures is offline
Newbie Coder
  
Join Date: Jul 2010
Posts: 12
Thanks: 4
Thanked 0 Times in 0 Posts
Wow you are amazing. Thank you so much. I liked how the bottom menu still had the accordion feature though. For example, when you're already on the share menu, and you click the flicks menu, then it just closes the share menu. I would like it still to open the flicks menu. Is there any way we can do that?

Thank you again,
Ryan
Reply With Quote
  #4 (permalink)  
Old 10-25-10, 09:09 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
Ok, this will work.

jquery.topmenu.js
Code:
jQuery.fn.extend({
  haccordion: function(params)
  {
   var jQ = jQuery;
   var params = jQ.extend({
    speed: 500,headerclass: "header",contentclass: "content",contentwidth: 220},params);
    return this.each(function()
    {
     jQ("."+params.headerclass,this).click(function()
     {
      var p = jQ(this).parent()[0];
      if(swa == 1)
      {
       jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);
       prev = this;
       swa = 0;
       }
      if(swa == 0)
      {
       p.opened = this
       if(p.opened != prev)
       {
        jQ(prev).next("div."+params.contentclass).animate({width: "0px"},params.speed);
        prev = p.opened;
        swb = 1;
        }
       if(swb == 1)
       {
        jQ(p.opened).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);
        swb = 0;
        }
       else
       {
        jQ(p.opened).next("div."+params.contentclass).animate({width: "0px"},params.speed);
        swb = 1;
        }
       }
      });
    });
   }
 });
jquery.bottommenu.js
Code:
jQuery.fn.extend({
  haccordion2: function(params)
  {
   var jQ = jQuery;
   var params = jQ.extend({
    speed: 500,headerclass: "header2",contentclass: "content2",contentwidth: 500},params);
    return this.each(function()
    {
     jQ("."+params.headerclass,this).click(function()
     {
      var p = jQ(this).parent()[0];

      if(sw1a == 1)
      {
       jQ(this).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);
       prev1 = this;
       sw1a = 0;
       }
      if(sw1a == 0)
      {
       p.opened = this
       if(p.opened != prev1)
       {
        jQ(prev1).next("div."+params.contentclass).animate({width: "0px"},params.speed);
        prev1 = p.opened;
        sw1b = 1;
        }
       if(sw1b == 1)
       {
        jQ(p.opened).next("div."+params.contentclass).animate({width: params.contentwidth + "px"}, params.speed);
        sw1b = 0;
        }
       else
       {
        jQ(p.opened).next("div."+params.contentclass).animate({width: "0px"},params.speed);
        sw1b = 1;
        }
       }
      });
    });
  }
});
HTML Code:
<!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" />

<script type='text/javascript' src='site/scripts/jquery-1.4.2.min.js'></script>
<script type="text/javascript" src="site/scripts/jquery.topmenu.js"></script>

<script type="text/javascript" src="site/scripts/jquery.bottommenu.js"></script>
    <script type="text/javascript">
       var swa = swb = sw1a = sw1b = 1,prev,prev1;
        $(function(){
            $(".haccordion").haccordion();
        });
    
        $(function(){
            $(".haccordion2").haccordion2();
        });
    </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 id="line"></div>
        <div id="movie"><iframe src="http://player.vimeo.com/video/15676240?byline=0&amp;portrait=0&amp;color=ffffff" width="1000" height="563" frameborder="0"></iframe></div>
        <div id="line"></div>
        <div id="bottom">
            <div class="haccordion2">
                  <div class="header2"><img src="site/images/sharebutton.png"/></div>
                  <div class="content2"><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>
As you can see, you need three global variables for each function to make it work.
jquery.topmenu.js uses swa, swb and prev.
jquery.bottommenu.js uses sw1a, sw1b and prev1.
Now you can add as many menu's as you want to either the top or bottom.
__________________
Jerry Broughton
Last edited by job0107; 10-25-10 at 09:19 PM.
Reply With Quote
The Following User Says Thank You to job0107 For This Useful Post:
jickpictures (10-26-10)
  #5 (permalink)  
Old 10-26-10, 02:51 PM
jickpictures jickpictures is offline
Newbie Coder
  
Join Date: Jul 2010
Posts: 12
Thanks: 4
Thanked 0 Times in 0 Posts
You're the man. I see what you did now with adding the global variables. Thank you so much for the help.
Reply With Quote
  #6 (permalink)  
Old 10-26-10, 06:13 PM
job0107's Avatar
job0107 job0107 is offline
Community Liaison
  
Join Date: Dec 2006
Location: Tacoma, Washington USA
Posts: 3,454
Thanks: 0
Thanked 140 Times in 137 Posts
You're welcome.
I actually had fun doing it.
__________________
Jerry Broughton
Reply With Quote
Reply

Bookmarks

« Class change help! | Add "Handles" to these draggable boxes? »

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)
 
Thread Tools
Display Modes
Linear Mode Linear Mode

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are On
Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Superfish jquery menu problems with modification transcend2005 CSS 2 03-25-09 01:30 AM
css problem with the scroll bar crazy.works CSS 0 11-04-08 05:34 PM
AnyLink Drop Down Menu - Smarty Error? shadyy510 JavaScript 2 05-08-08 11:44 AM
CSS Menu tobyjoiner CSS 3 12-11-06 01:45 PM
Xml / Dom / Css Mark_SC.SE JavaScript 0 06-29-05 08:05 AM


All times are GMT -5. The time now is 02:03 AM.
vBulletin® Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.