treehouse : what would you like to learn today?
Web Design Web Development iOS Development

how to build a slide down page content?

  • I am wondering how to incorporate a smooth slide down content like this one on CSS Tricks : http://css-tricks.com/snippets/
  • I'm not sure if this was how CSSTricks did it, but I assume that the slide function is either js or a -webkit-transition. Using the transition function in combo with a position change upon clicking the bar could yield that effect. I'm no js expert, but code like:


    function HideContent(d) {
    document.getElementById(d).style.display = "none";
    }
    function ShowContent(d) {
    document.getElementById(d).style.display = "block";
    }
    function ReverseDisplay(d) {
    if(document.getElementById(d).style.display == "block") { document.getElementById(d).style.display = "none"; }
    else { document.getElementById(d).style.display = "block"; }
    }

    would show the divs containing the links. Again, not an expert, just thinking out loud.
  • It looks like just a simple jquery accordion effect, and disabling js shows that it is done via scripting. Without it, the content is all extended (nice bit o' progressive enhancement there).

    Google brings up a number of good tutorials on creating the effect. Hope that helps.
  • Thanks! I figured out from your links!
  • Thats not accordion, just Toggle panel.