Results 1 to 3 of 3

Thread: Accordion Menu - click on unexpandable items, collapse everything else

  1. #1
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Accordion Menu - click on unexpandable items, collapse everything else

    At firs I want to say hello, because I am new on this forum.

    1) Script Title: Bullet List Accordion Menu
    2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...enu-bullet.htm
    3) Describe problem: When I click on item (expandable and unexpandable), I want everything else to collapse (expandableheaders and subexpandableheaders)

    Normally when you click on expandable menu header you have the option (collapseprev) to close other menu header which is opened at this moment. The same situation is with subexpandable headers.
    I need to be able to collapse everything else when i click on non expandable header.
    For example:

    expandable_header_1
    -subexspandable_header_1_1
    -subesxpandable_header_1_2
    -nonexpandable_header_1_3
    expandable_header_2
    -subexspandable_header_2_1
    -subexspandable_header_2_2
    nonexpandable_header_3

    Now script works like this:
    1. click on expandable_header_1 - this header expands -> click on expandable_header_2 - this header expands and expandable_header_1 collapse
    2. click on subexpandable_header_1_1 - this header expands -> click on subexpandable_header_1_2 - this header expands and subexpandable_header_1_1 collapse
    3. click on expandable_header_1 - this header expands ->click on subexpandable_header_1_1 - this header expands ->click on expandable_header_2 - this header expands and expandable_header_1 collapse -> click on expandable_header_1 once more - this header expands and subespandable_header_1_1 is expanded (I want it to be collapsed)

    I want it to work like this:
    1. click on expandable_header_1 - this header expands -> click on nonexpandable_header_3 - expandable_header_1 collapse
    2. click on expandable_header_1 - this header expands -> click on subexpandable_header_1_1 - this header expands -> click on nonexpandable_header_3 - expandable_header_1 collapse -> click once more on expandable_header_1 - this header expands and subexspandable_header_1_1 is collapsed
    3. click on expandable_header_1 - this header expands -> click on subesxpandable_header_1_2 - this header expands -> click on nonexpandable_header_1_3 -> subesxpandable_header_1_2 collapse

    In other words: when I clisk on menu (expandable or nonexpandable, mainmenu or submenu) I want everything else to close ( expandable and subexpandable).

    I found this threads, but those are not working for me:

    http://www.dynamicdrive.com/forums/s...-items-in-list
    http://www.dynamicdrive.com/forums/s...Accordion-Menu

    I know I can do this like this: <a href="kontakt.php" data-pjax='rightcolumn' class="menuheader" onClick="ddaccordion.collapseall('expandable'); ddaccordion.collapseall('subexpandable'); return false;" >kontakt</a>

    But this way I ned to add onClick manually to every link, which is rather bad idea.
    I hope there is easy solution with onopenclose:function(header, index, state, isuseractivated) {}
    Last edited by ddadmin; 06-21-2013 at 04:08 AM.

  2. #2
    Join Date
    Dec 2008
    Location
    Portsmouth, UK
    Posts
    1,794
    Thanks
    2
    Thanked 419 Times in 413 Posts

    Default

    I have not sorted persistence but this may help

    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
    
    <head>
    
    
    <style type="text/css">
    
    .arrowlistmenu{
    width: 180px; /*width of accordion menu*/
    }
    
    .arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
    font: bold 14px Arial;
    color: white;
    background: black url(titlebar.png) repeat-x center left;
    margin-bottom: 10px; /*bottom spacing between header and rest of content*/
    text-transform: uppercase;
    padding: 4px 0 4px 10px; /*header text is indented 10px*/
    cursor: hand;
    cursor: pointer;
    }
    
    .arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
    background-Color: red;
    }
    
    .arrowlistmenu ul{ /*CSS for UL of each sub menu*/
    list-style-type: none;
    margin: 0;
    padding: 0;
    margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
    }
    
    .arrowlistmenu ul li{
    padding-bottom: 2px; /*bottom spacing between menu items*/
    }
    
    .arrowlistmenu ul li a{
    color: #A70303;
    background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
    display: block;
    padding: 2px 0;
    padding-left: 19px; /*link text is indented 19px*/
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid #dadada;
    font-size: 90%;
    }
    
    .arrowlistmenu ul li a:visited{
    color: #A70303;
    }
    
    .arrowlistmenu ul li a:hover{ /*hover state CSS*/
    color: #A70303;
    background-color: #F3F3F3;
    }
    
    </style>
    
    </head>
    
    <body>
    <div id="tst" class="arrowlistmenu">
    
     <div>
      <h3 class="menuheader expandable">CSS Library</h3>
      <ul class="categoryitems" >
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li>
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li>
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li>
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li>
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li>
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
       <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
      </ul>
     </div>
    
     <div>
      <h3 class="menuheader expandable">CSS Drive</h3>
      <ul class="categoryitems">
       <li><a href="http://www.cssdrive.com">CSS Gallery</a></li>
       <li><a href="http://www.cssdrive.com/index.php/menudesigns/">Menu Gallery</a></li>
       <li><a href="http://www.cssdrive.com/index.php/news/">Web Design News</a></li>
       <li><a href="http://www.cssdrive.com/index.php/examples/">CSS Examples</a></li>
       <li><a href="http://www.cssdrive.com/index.php/main/csscompressor/">CSS Compressor</a></li>
       <li><a href="http://www.dynamicdrive.com/forums/forumdisplay.php?f=6">CSS Forums</a></li>
      </ul>
     </div>
    
    
     <div>
      <h3 class="menuheader expandable">JavaScript Kit</h3>
      <ul class="categoryitems">
       <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li>
       <li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li>
       <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li>
       <li><a href="http://www.javascriptkit.com/domref/">DOM Reference</a></li>
       <li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li>
      </ul>
     </div>
    
    
     <div>
      <h3 class="menuheader" style="cursor: default">FeedBack</h3>
      <div>
       Regular contents here. Header does not expand or contact.
      </div>
     </div>
    
    
    </div>
    
    
    
    <script type="text/javascript">
    /*<![CDATA[*/
    // Simple Accordian (21-June-2013)  DRAFT
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    var zxcAccordian={
    
     init:function(o){
      var id=o.ID,obj=document.getElementById(id),ms=o.Animate,cls=o.OpenClass,mse=o.EventType=='mouseover',md=o.MouseDelay,days=o.Persistence,nu=o.Open;
      if (obj){
       var clds=obj.childNodes,h,ul,d=document.createElement('DIV'),sz,a,c,cnt=0,ary=[],oop={ary:[]},days=(typeof(days)=='number'&&days>0)||days=='session'?days:-1,ck=this.cookie(id),z0=0;// nu=days!=-1&&ck?ck*1:nu,
       d.style.overflow='hidden';
       for (;z0<clds.length;z0++){
        if (clds[z0].nodeType==1){
         h=clds[z0].getElementsByTagName('*')[0];
         ul=clds[z0].getElementsByTagName('UL')[0];
         d=d.cloneNode(false);
         if (ul){
          d.appendChild(ul);
          clds[z0].appendChild(d);
         }
         sz=(nu!=cnt||!ul?0:ul.offsetHeight);
         d.style.height=sz+'px';
         c=h.className;
         a=[h,d,ul?ul:false,sz,c,c+' '+cls,cnt];
         h.className=a[sz==0?4:5];
         oop.ary[cnt]=a;
         if (mse){
          this.addevt(clds[z0],'mouseover','mse',oop,a);
          this.addevt(clds[z0],'mouseout','mse',oop,a);
         }
         else {
          this.addevt(clds[z0],'click','open',oop,a);
         }
         cnt++;
        }
       }
       oop.id=id;
       oop.days=days;
       oop.a=oop.ary[nu]?oop.ary[nu]:null;
       oop.ms=typeof(ms)=='number'&&ms>0?ms:1000;
       oop.md=typeof(md)=='number'&&ms>0?md:200;
       zxcAccordian['zxc'+id]=oop;
       oop.lst=o.CloseLast!==false;
       oop.tog=o.Toggle===true;
       oop.onopen=typeof(o.onopen)=='function'?o.onopen:false;
       typeof(o.oninit)=='function'?o.oninit(oop.ary,nu):null;
      }
     },
    
     mse:function(o,a,e){
      var oop=this;
      clearTimeout(o.to);
      e.type=='mouseover'?o.to=setTimeout(function(){ oop.open(o,a); },o.md):null;
     },
    
     open:function(o,a){
      if (o.lst&&o.a&&o.a[2]){
       this.animate(o,o.a,o.a[3],0,new Date(),o.ms);
       o.a[0].className=o.a[4];
      }
      if (a[2]){
       this.animate(o,a,a[3],!o.tog||a[3]==0?a[2].offsetHeight:0,new Date(),o.ms);
      }
      o.a=a;
      o.onopen?o.onopen(a[0],a[1],a[2],a[6]):null;
      return a[2]?false:true;
     },
    
     animate:function(o,a,f,t,srt,mS,nxt){
      clearTimeout(a[7]);
      var oop=this,ms=new Date().getTime()-srt,n=(t-f)/mS*ms+f;
      if (isFinite(n)){
       a[3]=Math.max(n,0);
       a[1].style.height=a[3]+'px';
      }
      if (ms<mS){
       a[7]=setTimeout(function(){ oop.animate(o,a,f,t,srt,mS,nxt); },10);
      }
      else {
       a[3]=t;
       a[1].style.height=t+'px';
       a[0].className=a[t==0?4:5];
       document.cookie=o.id+a[6]+'='+(t!=0)+(typeof(o.days)=='number'?';expires='+(new Date(new Date().getTime()+o.days*86400000).toGMTString())+';path=/;':';');
      }
     },
    
     addevt:function(o,t,f,p,p1){
      var oop=this;
      if (o.addEventListener){
       o.addEventListener(t,function(e){ return oop[f](p,p1,e);}, false);
      }
      else if (o.attachEvent){
       o.attachEvent('on'+t,function(e){ return oop[f](p,p1,e); });
      }
     },
    
     cookie:function(nme){
      var re=new RegExp(nme+'=[^;]+','i');
      return document.cookie.match(re)?document.cookie.match(re)[0].split("=")[1]:'false';
     }
    
    
    
    }
    
    zxcAccordian.init({
     ID:'tst',                  // the unique ID name of parent DIV.                                        (string)
     Open:0,                    //(optional) the index number of the content to expand.                     (number, default = no open content)
     Animate:100,               //(optional) the animation speed in milli seconds.                          (number, default = 1000)
     OpenClass:'openheader',    //(optional) the class name of the open header.                             (string, default = no open class)
     Toggle:true,               //(optional) true = toggle the header open and close.                       (booleah, default = false = no toggle)
     CloseLast:true,            //(optional) false = do not close the previous opened header.               (booleah, default = true = close the previous opened header)
     EventType:'click',         //(optional) the event type, 'click' or 'mouseover'.                        (string, default = 'click')
     MouseDelay:200,            //(optional) the mouseover open delay in milliseconds.                      (number, default = 200)
    // Persistence:1,             //(optional) the number of days to restore the last display.                (number, default = -1)
    //                            //(optional) 'session' = restore the last display for the browser session.  (number, default = -1 days)
     oninit:function(ary,i){    //(optional) the function to call on initilization.                         (function, default = no function call)
      // ary = array of all child objects
      //     field 0 = the header.
      //     field 1 = the script div containing the UL.
      //     field 2 = the UL.
      //     field 6 = the index number.
      // i = the index number of the open array
     },
     onopen:function(h,d,ul,i){ //(optional) the function to when a header is opended.                       (function, default = no function call)
      //     h  = the open header.
      //     d  = the open header script div containing the UL.
      //     ul = the open header UL.
      //     i  = the index number of the open header
     }
    });
    /*]]>*/
    </script>
    
    </body>
    </html>
    Vic
    God Loves You and will never love you less.
    http://www.vicsjavascripts.org/Home.htm
    If my post has been useful please donate to http://www.operationsmile.org.uk/

  3. #3
    Join Date
    Jun 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Thanks very much for reply.

    This script would be great for me if it has working persistance.
    And how can I add sub menu to it ?

    I am not web develloper I am just making simple website for my wife. It can be seen under http://sk-architekci.pl/sknowy/
    I am using pjax to display content in the main window.
    I found dirty solution for my problem from first post:

    <script type="text/javascript">
    $(document).ready(function(){
    $(".menuheader").click(function(){
    ddaccordion.collapseall('subexpandable');
    });
    $(".nonexpandable").click(function(){
    ddaccordion.collapseall('expandable');
    });
    $(".nonsubexpandable").click(function(){
    ddaccordion.collapseall('subexpandable');
    });
    });
    </script>

    It is working for all browsers wit push sate compability, ofcourse except IE ! hehe
    In IE there is a problem because if I click on menu, whole page is reloading and the above script is starting to work, menu is starting to collapse... and the page is reloading. ( open my page click on STRAWBALE >TECHNOLOGIA and then click on LINKI ZEWNETRZNE OR DLA INWESTORA OR KONTAKT - You will see what I mean )

    Please help, maybe the solution is very simple or maybe there is some dirty workaround ??
    Last edited by szpaq20; 06-22-2013 at 07:34 PM.

Similar Threads

  1. accordion menu-extra space between items in IE
    By kralspace in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 10-08-2010, 06:54 PM
  2. Accordion Menu, additional nested items
    By magsuk in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-14-2009, 09:14 AM
  3. CSS Menu - Not Able to Click on items
    By brianpaschj in forum CSS
    Replies: 1
    Last Post: 12-21-2007, 02:36 PM
  4. Simple Tree Menu: exand/collapse just with click on +/-
    By hannelore in forum Dynamic Drive scripts help
    Replies: 2
    Last Post: 06-21-2007, 04:57 PM
  5. Switch Menu II - how to collapse submenu on click
    By nikitakudrin in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 11-02-2005, 07:57 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •