www.webdeveloper.com
Results 1 to 2 of 2

Thread: How can I do something similar to slideToggle() without JQuery?

  1. #1
    Join Date
    Mar 2010
    Posts
    701

    How can I do something similar to slideToggle() without JQuery?

    I want to use something like slideToggle() in JQuery for my dropdown menu, but I do not want to load JQuery just for the one menu. How can I remake the function with just Javascript? Does anyone know of such a function?

  2. #2
    Join Date
    Mar 2010
    Posts
    701
    I wrote this function, it's glitchy at times. How can I improve it?
    "f" is the menu. "f+'content'" is the dropdown part of the menu.
    Code:
    function slideToggle(f){
    if(typeof f=='undefined')
    return;
    
    fo=document.getElementById(f);
    o=document.getElementById(f+'content')
     if(o.style.display!='block'){
        fo.setAttribute('class','open');
        o.style.opacity=0;
        o.style.display='block';
        o.style.height='auto';
        if(typeof h!='undefined')
          o.style.height=h;
        else
          h=o.offsetHeight;
        o.style.height=0;
        r=0;i=0;t=0;
        var int=setInterval(function(){
          o.style.height=i+'px';
          if(t<100){
            o.style.opacity=t;
            t=t+5;
          }
          i=i+r;r++;
          if(i>h){
            o.style.height=h;
            clearInterval(int);
          }
        },20);
     } else {
        r=0;i=o.offsetHeight;
        var int=setInterval(function(){
          o.style.height=i+'px';
          o.style.opacity=i/100;
          i=i-r;r++;
          if(i<1){
            clearInterval(int)
            o.style.display='none';
            fo.removeAttribute('class');
          }
        },20);
     }
    }

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles