Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts

    Question JQuery accordion - currently JS set height

    in my page: http://fctest.inpreview.net/test.php

    the div in my LI has the following styles set: height: 540px; display: block; overflow: visible;

    I don't want a set height, does anyone know how I can change this or overwrite it, think the JavaScript is setting the height?!

  • #2
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Can anyone help here?

  • #3
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,504
    Thanks
    3
    Thanked 501 Times in 488 Posts
    replace

    Code:
            $(document).ready(function() {
                $('#accordion').accordion();
            });
    with

    Code:
    // Simple Accordian (29-June-2012)
    // by Vic Phillips - http://www.vicsjavascripts.org.uk/
    
    function zxcAccordian(o){
     var ul=document.getElementById(o.ID),lis=ul.getElementsByTagName('LI'),a,p,ary=[],nu=o.Display,ms=o.Animate,z0=0;
     for (;z0<lis.length;z0++){
      a=lis[z0].getElementsByTagName('A')[0];
      p=lis[z0].getElementsByTagName('P')[0];
      if (a&&p){
       this.addevt(a,'click','open',z0);
       ary[z0]=[p,p.offsetHeight,'dly'+z0];
       p.style.height=(nu!=z0?0:p.offsetHeight)+'px';
       p.style.overflow='hidden';
      }
     }
     this.ary=ary;
     this.ms=typeof(ms)=='number'?ms:1000;
     this.lst=ary[nu];
    }
    
    zxcAccordian.prototype={
    
     open:function(nu){
      var p=this.ary[nu],lst=this.lst;
      if (!lst||(p&&p[0]!=lst[0])){
       if (lst){
        clearTimeout(this[lst[2]]);
        this.animate(lst[0],parseInt(lst[0].style.height),0,new Date(),this.ms,lst[2]);
       }
       clearTimeout(this[p[2]]);
       this.animate(p[0],parseInt(p[0].style.height),p[1],new Date(),this.ms,p[2]);
       this.lst=p;
      }
      return false
     },
    
     animate:function(obj,f,t,srt,mS,to){
      var oop=this,ms=new Date().getTime()-srt,now=(t-f)/mS*ms+f;
      if (isFinite(now)){
       obj.style.height=Math.max(now,0)+'px';
      }
      if (ms<mS){
       this[to]=setTimeout(function(){ oop.animate(obj,f,t,srt,mS,to); },10);
      }
      else {
       obj.style.height=t+'px';
      }
     },
    
     addevt:function(o,t,f,p){
      var oop=this;
      if (o.addEventListener) o.addEventListener(t,function(e){ return oop[f](p,e);}, false);
      else if (o.attachEvent) o.attachEvent('on'+t,function(e){ return oop[f](p,e); });
     }
    
    }
    
    
    new zxcAccordian({
     ID:'accordion',  // the unique ID name of the parent UL.               (string)
     Display:0,       //(optional) the initial LI index number to display.  (number, default = all hidden)
     Animate:1000     //(optional) the animation duration in milli seconds. (number, default = 1000)
    });
    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/

  • #4
    Senior Coder
    Join Date
    Feb 2009
    Location
    Ilkley, West Yorkshire, UK
    Posts
    2,950
    Thanks
    9
    Thanked 724 Times in 718 Posts
    Or, if you want to stick with jQuery:

    Code:
    $(document).ready(function() {
                $('#accordion').accordion({autoHeight:false});
            });
    (but donate to Vic's charity anyway...)

  • #5
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Thanks very much Vic (vwphillips) - and thanks to SB65 for the jQuery


    One last problem...when I click on each title, the whole page moves (footer moves up and down) is there a way around this?

    Maybe setting Max-height on the UL?

  • #6
    Banned
    Join Date
    Mar 2007
    Posts
    1,523
    Thanks
    116
    Thanked 0 Times in 0 Posts
    Sorted!


  •  

    Posting Permissions

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