Question

I only have very basic knowledge on Javascript and I want to be able to make my more/less button that displays/hides content be an animated slide instead of an instant change. Here is the Javascript I currently have:

function doMenu(item) {
    obj=document.getElementById(item);
    col=document.getElementById("x" + item);
    if (obj.style.display=="none") {
        obj.style.display="block";
        col.innerHTML="[-] Less";
    } else {
        obj.style.display="none";
        col.innerHTML="[+] More";
    }
}

Does anyone know how I can change this Javascript to slide instead?

EDIT An example of the link I use to show/hide content

<a href="JavaScript:doMenu('main');" id=xmain>[+] More</a>

Answer 1

Here’s a jquery way to do it… (though i didn’t have time to test…)

the script :

$(function() {     
       $(".moreLess").hide();

       $(".moreLessSwitch").toggle(function() {             
            $(this).html("[-] Less");            
            $(this).prevAll(".moreLess").slideDown();         
       }, function() {            
            $(this).html("[+] More");            
            $(this).prevAll(".moreLess").slideUp();        
       }); 

});

the HTML :

stuff to always show
<div class="moreLess">stuff to hide...</div>
<div class="moreLessSwitch">[+] More</div>

EDIT: I should never post w/out testing…

Here’s the working jsFiddle: http://jsfiddle.net/shaneblake/v9WAr/