digg

Join DiggAbout

Discover the best of the web!
Learn more about Digg by taking the tour.

How to Create a Collapsible DIV with Javascript and CSS

harrymaugans.com — Great web development tutorial for anyone from beginners to programming monks. A simple trick that needs to be used more often.

Bury
show profanity settings
expand all
  • hmaugans, on 10/12/2007, -1/+42Mirrors (if needed):
    http://www.harrymaugans.com.nyud.net:8080/2007/03/05/how-to-create-a-collapsible-div-with-javascript-and-css/
    http://www.duggmirror.com/programming/How_to_Create_a_Collapsible_DIV_with_Javascript_and_CSS
    • crawfishsoul, on 10/12/2007, -26/+5digg me down yo
    • foxymcfox, on 10/12/2007, -1/+9Wow! First comment mirrors. I'm impressed. Thanks man, duggmirror was just what the doctor ordered

      This is a great straight forward little tutorial, but what I'd really love to see is a tutorial about creating sliding/animated collapsing divs (Like the show/hide option on Digg comments) without the needs for MooTools, or the like.

      Anyone have a source?
    • greyfade, on 10/12/2007, -5/+1@foxymcfox: Do you understand parametric functions or spline interpolation? If so, you're halfway there.

      Set div.style.overflow = "hidden" and set up a timer with a short timeout that progressively reduces the height of the div - interpolate between the original height and 0 over the course of (e.g.) a second. Do precisely the reverse to expand.

      Any programmer worth his salt can figure that out.
    • Chongo, on 10/12/2007, -0/+5@foxymcfox - Mootools has had alot of time invested in it though so its not a huge cheat to use it IMO.

      but in the interest of learning I would go on google and search for "Javascript animation" or "Javascript animation without moo". Keep varying it up... I just found a whole bunch.

      hope that helps
    • foxymcfox, on 10/12/2007, -0/+2Thanks, guys. I know the theory behind it, but I've just been too lazy to sit down and type it out, since none of my current projects require it. I've found that just reading tutorials will help embed them in my head, so that by the time I need to use the techniques involved I don't have to do too much thinking. That's the only reason I was looking for a tut'. If I find the time, maybe I'll write up my own tutorial, to help those who may be wondering the same thing...but that is a big if.

      Thanks again for your help.

      //I'm more of a coder than a programmer
    • misterjangles, on 10/12/2007, -0/+5foxymcfox - you can roll your own but using a toolkit sometimes is preferable unless you want to test your script in all various browsers and OSs to make sure it works right. I think scriptaculous (http://script.aculo.us/) is pretty decent for your basic animation effects. Pretty much one line of code will do all the effects, for example:

      onclick="Effect.Fade('myDiv')"
    • hmaugans, on 10/12/2007, -0/+2Also check out the improved version:
      http://www.digg.com/programming/How_to_Create_Digg_Comment_Style_Sliding_DIVs_with_Javascript_and_CSS
    • gncboard, on 10/24/2007, -2/+0thanks so much for link

      http://www.gncboard.com/
  • rdivilbiss, on 10/12/2007, -10/+32Using inline style declarations and "javascript:;" href attributes on anchors should be discouraged. Both will cause accessibility issues and the latter will hurt your SEO page rank.

    Better to use a button styled as a link and to separate style from markup.

    Sorry, no digg.
    • eric1, on 10/12/2007, -0/+6Could you elaborate? Do you mean to do the same thing as the tutorial suggests, but using a button instead of a text link? I do work for a university and accessibility is one of our main goals. I was aware that the links, as shown, could cause accessibility issues, but didn't know how to get around them.
    • ell0bo, on 10/12/2007, -6/+2This method works just fine, maybe you could just do a

      el.className = (el.className == 'show')?'hide':'show';

      if you have issues with 'inline' style notations. There is no real reason though to worry about that, since that inline will work in almost any browser i can think of off the top of my head. One thing that I would add though is to grab a snapshot of what the element's display type is before you set it to none (think if you're trying to hide a span and show it again in block formation). just do something like

      el.oldName = el.className; (el.className == 'hide')?(typeof(el.oldName) == 'undefined' ? 'show' : el.oldName):'hide';

      That way you can save yourself some grief later if you wish and can toggle anything you like. (even make show just '' and take any class name away) I just play around with DHTML all the time to see what I can do interface wise and this saves me time. Anyone interested feel free to check out code at www.vocabri.com .
    • armbar, on 10/12/2007, -0/+2You can also just use the button element and wrap it around a piece of text. Valid HTML, and it's better than having to style an input element.

      [button]Click to toggle div[/button]

      P.S. Digg doesn't like HTML markup, so replace the hard brackets with angle brackets.
    • rdivilbiss, on 10/12/2007, -0/+1@eric1.

      Digg uses accessible links to show and hide buried comment divisions. The key is to provide an onclick="return yourfunction()" and to make sure your fancy client side script always returns false to prevent the link from executing. Then provide a valid URL in the href to your page and let the server side code render the divisions based on the supplied parameters. Here is only one way of doing this.

      http://digg.com/programming/Re_How_to_REALLY_Create_Digg_Comment_Div_s_with_Accessible_Links
  • Enchirito, on 10/12/2007, -2/+13I think every js library out there has a toggle function. Most are very lightweight and save you the trouble of basic tasks like this. I recommend Prototype.
    • Albion, on 10/12/2007, -1/+31most js librarys do have a toggle function, but why include a whole library if you just need a couple of functions? also the implenation they show you is not the best, it should be:

      function toggleDiv(divid){
      var div = document.getElementById(divid);
      div.style.display = div.style.display == 'block' ? 'none' : 'block';
      }

      this implentation is much neater and there is only one dom lookup
    • monsters, on 10/12/2007, -2/+15yey ternary operators!
    • armbar, on 10/12/2007, -5/+11Did you really just include Prototype and "lightweight" in the same comment?
  • riceklown, on 10/12/2007, -2/+1I use almost the exact same method for simple js drop down menus
  • prockcore, on 10/12/2007, -7/+17Great tutorial on how to create a collapsible web server.
  • lichme5000, on 10/12/2007, -1/+4Rather than this fairly basic example, how about somebody post a basic example of how digg does their div rolling/unrolling trick.
  • MegaBabu, on 10/12/2007, -10/+4well that site died quick, only 70 diggs in
    • geekitechture, on 10/12/2007, -6/+1Don't digg MegaBabu down, the site is gone.

      New title:
      How to Create a Collapsible DIGG without any Bandwidth
  • hsbsitez, on 10/12/2007, -3/+1used more?
    I believe my site has already exhausted this functionality.
  • Stonekeeper, on 10/12/2007, -0/+17Using jquery, this becomes:

    $(divid).toggle();

    I recommend jquery to all!
  • democracysucks, on 10/12/2007, -19/+3I'm sure this is great and all, but Javascript just plain sucks. *sigh* I use Javascript on my site (for includes), but even I myself have NoScript installed. There's got to be something better than Javascript, and something a bit safer for public servers than PHP.
    • armbar, on 10/12/2007, -0/+5Any explanation of why Javascript sucks, rather than just the statement? I've been working with it for about 7 years now, and I absolutely love it. It's fast, easy to learn (at least the basics), and you can use it as the tool for so many different things. Where's the problem?
    • austindkelly, on 10/12/2007, -0/+5Perhaps you just dont know enough about the language? JS is a great tool, although I dont know why you are using it for your includes.
    • greyfade, on 10/12/2007, -0/+7@democracysucks: If you can convince the browser vendors (read: Microsoft, Mozilla, Opera, KDE, Apple, et. al. - ALL of them) to support Lua, Ruby, Python, TCL, or just about any other good candidate language - just one of them - and to improve DOM level 2 support, then you'll probably have 90% of web devleopers behind you on that suggestion.

      The fact is, *ONLY* JavaScript is universally supported. The *ONLY* alternative is VBScript, and it is *ONLY* supported by IE on Windows (you can't even really license the VBScript engine - you have to use WSH, which is Windows-only and iffy at best). If you don't like JavaScript/ECMAScript, then you're ***** out of luck, bucko.

      As for an alternative to PHP... You can use assembly language, fer *****'s sake! Make some goaddamn ***** up and you can USE it (provided you conform to the CGI/1.1 spec so your web server can talk to it). PHP isn't all there is. Ruby, Perl, Python, C, Java, VBScript, the .NET family.... There are hundreds of alternatives. Take your pick and stop whining about PHP.
    • WeaponMit, on 10/12/2007, -1/+1@democracysucks: If php isn't safe for public servers lets see you hack digg...or yahoo mail. Since they are both running on php. You my friend are a complete asshat.
    • jmtmeyer, on 10/12/2007, -1/+1@greyfade: You win this set of comments! :-)
    • cdomigan, on 10/12/2007, -0/+0There's nothing wrong with Javascript as a language, in fact it's one of my favourite (and I've used quite a few). What does suck it's its poor range of functions for accessing and manipulating the DOM. ie document.getElementById(etc) and family are way too cumbersome. This is where a decent javascript library (such as jQuery) comes in.

      Javascript as a language is extremely powerful and flexible.
    • r3zim, on 10/12/2007, -0/+1IMHO the worse JS flaws I've noticed are the lack of function overloading and poor source file linkage (from other source files).

      Still, it's a lot more capable than developers realize.
  • Query, on 10/12/2007, -3/+3Aw. I thought it was going to be the animated type, like when you bury me for posting this completely irrelevant comment.
  • npsken, on 10/12/2007, -2/+6Or...

    use http://script.aculo.us and get better effects including *sliding* collapsible divs.

    BTW, before people say that it is too big:
    scriptaculous.js?load=effects
    • hmaugans, on 10/12/2007, -4/+2But that doesn't teach anything... it's just a way to get it done. This explains things in pretty good detail, however simple it is.
    • armbar, on 10/12/2007, -1/+3Yeah, but it sits on top of prototype which is at least 25kb compressed, and the effects file is 37kb. Why would you want ~60kb of javascript for a simple toggle?

      Use Mootools if you want sliding effects, and it's only 3kb.
  • agarc, on 10/12/2007, -5/+5This just doesn't belong on the front page. I've seen far better tutorials.
  • kokopelli2001, on 10/12/2007, -3/+1Oh, yawn.

    This is easily accomplished using easytoggle.js from 2003. See http://simon.incutio.com/code/js/easytoggle/example2.html
  • mizraabianz, on 10/12/2007, -0/+1This is great, i know there are tons of libraries like jquery to do this sort of trick but this is simple and quick way to do same thing and plus this will load quicker.
  • diggdisc, on 10/12/2007, -3/+0LOLLL....And next we have how to create a drop down menu.........
  • codered82, on 10/12/2007, -0/+6Yay jQuery: $('#myDiv').toggle();
  • austindkelly, on 10/12/2007, -1/+6Is it just me, or does ever WordPress page that gets dugg go down? I have never used WordPress, but if the later is true, it must be a POS.
  • bkemper, on 10/12/2007, -0/+6"Another common do-nothing insert to use for the href property is a pound sign (#), and while that will work, it’ll also move the user’s scroll bar to the very top of your website, which can get quite annoying."

    not if you return false in the javascript.

  • kazaru, on 10/12/2007, -2/+2"A simple trick that needs to be used more often."

    um no, more like

    a simple trick that is used TOO often.
    • hmaugans, on 10/24/2007, -0/+5Why do you say that?

      If used correctly, it's helpful.
  • gioma1, on 10/24/2007, -1/+11In Firefox and Opera it can be done without JavaScript, just pure CSS:

    http://noscript.net/noscript/toggle.html


    • illeat, on 10/12/2007, -0/+5That method excludes IE which is the dominant browser. Seems like a silly thing to do...
    • ldkronos, on 10/12/2007, -0/+5But no IE, so that's not very helpful for 99% of websites. A cool trick, none the less.
  • Dustin00, on 10/12/2007, -2/+1Well.. it's definately collapsable.
    • yahoofrom, on 10/12/2007, -0/+1your comment will be collapsed into a gray stripe.
  • vtel001, on 10/12/2007, -3/+2> digg me down yo

    lol!
  • andocom, on 10/12/2007, -0/+0I understand why they didn't include it in the sample code, but its obviously very easy to also toggle the text of the link at the same time between Show|Hide. ie give the link an ID, then toggle the innerHTML of the link while toggling the display property.

    document.getElementById(divid).style.display = 'block';
    document.getElementById('btn' + divid).innerHTML = 'Hide Content';
    }else{
    document.getElementById(divid).style.display = 'none';
    document.getElementById('btn' + divid).innerHTML = 'Show Content';

  • rip747, on 10/12/2007, -5/+2buried as lame since this effect is included in just about every JavaScript toolkit out there from jQuery to Scriptaculous
  • ColdChilli, on 10/12/2007, -4/+2WOW!
    A who page on a simple concept like using functions for your javascript!
    Its called structured programming
    let's take CS101 all over again.
    /sarcasm
  • eaburk, on 10/12/2007, -1/+0Everybody is mentioning toolkits but nothing about the dojo toolkit. It is a big library but using dojo.require it only loads what it needs to perform the functionality you ask for. It easily performs cross-browser compatible animation and lots more. Link is http://dojotoolkit.org. The only downside is poor documentation.
  • jhecht, on 10/12/2007, -0/+0I can never use Mootools or the like, i don't get how that crap works. I would just rather use a prototype(its what javascript uses already, creating new ones is actually pretty fun, but kind of weird) that does what i need it to.

    var element = function(element_id){
    this.element = document.getElementById(element_id);
    this.toggle = function(){
    this.style.display=(this.style.display=='none') ? "" : "none";
    }

    this.slide = // etc etc, you get the idea.
    }

    Then when you want to call a new version of that, you do this:

    var Jhecht = new element("jimbo");

    I use something exactly like that for my AJAX object ;)
  • dbulli, on 10/12/2007, -1/+1And if the user has no javascript ... the content is lost forever ... can't recommend ... UNOBTRUSIVE is the way to go ...
  • crackmonkey, on 10/12/2007, -0/+1My rant:
    Unfortunately display is volatile. Don't put anything other than text in that div otherwise you can't guarantee the behavior between browsers and there is nothing you can do about it. Don't believe me.. dynamically add other elements with defined events into that div via innerHTML (like some anchors wrapping images with onClick defined .. yeah violate the crap out of the dom) now toggle display a few times and watch things get weird. Not weird enough for you. Place something with object/embed tags in that thing like a .swf and toggle display none. Now try it in Opera.
    I love how everyone preaches graceful degradation and UNOBTRUSIVE design while web development is a giant cluster ****. CSS hacks everywhere just to make IE6 behave. Sites designed to be compliant and then you open it up in any browser other than firefox and watch it die. If you haven't experienced the madness then you haven't developed long enough. Mootools with their pretty framework that sure looks good until you let it sit in an open browser for a while. I like to open a google maps instance with mootools and let them fight each other for memory.
    Oh and screw that slow memory leaking pile of crap Safari while we are at it. Typical attention whore Mac.
    • guitarguy, on 10/12/2007, -0/+0So what you're saying is, if you make a total mess inside the DIV and violate all the standards, you'll get unexpected behavior?
  • crackmonkey, on 10/12/2007, -0/+1There are no standards as long as Microsoft refuses to follow them. Reality is what IE makes it.
  • ammyjonnes, on 10/12/2007, -0/+01st Hello to everybody ,I am new to this forum.I have just join it today . 2ndly I think it's really a genuine question which you talk about .I think we shall need a healthy discussion. Even as onlyJavaScript is universally supported. The *ONLY* alternative is VBScript, and it is supported by IE on Windows But in short considering the advancement of the subject all I can add is that it's good if you should visit the site of Web Designing Company- Top Web Design Firm ,they might be a lesser known to you ,but it’s much easy to grasp a concept from their plateform.Even I am planning to redesign my flash website with attractive modifications soon.

  • marthabrow, on 10/12/2007, -0/+0I can't believe it! Who's able to open the link?
  • kwimia, on 10/11/2007, -0/+0Wow! Hard to beleive.
  • nify, on 10/11/2007, -0/+0Quite doubtful. Such things make me a bit crazy
  • poxoe, on 10/11/2007, -0/+0So... Sweet, dugg it.
  • vikings999, on 10/24/2007, -1/+0not if you return false in the javascript.
    http://megryan1.bravehost.com
    http://gearsofwar1.bravehost.com
    http://savagegardend.bravehost.com
  • snakes12, on 10/24/2007, -1/+0thank you

    http://www.cilginim.com
    http://www.bilgisavar.com
    http://www.highturk.net
    http://www.deneytube.com
    http://www.googleoyun.net
  • bendengectii, on 10/24/2007, -1/+0Article was so usefull for me.Thanks for your effort.

    Best regards

    http://www.bendengecti.com
  • Bruny, on 10/24/2007, -1/+0[...]I think every js library out there has a toggle function. Most are very lightweight and save you the trouble of basic tasks like this.[...]
    [http://mediafilmnetwork.com/]
  • kuduz, on 11/27/2007, -0/+0http://www.fixoyun.com
  • kuduz, on 12/02/2007, -0/+0http://www.bilgisavar.com
  • saboces, on 12/06/2007, -0/+0
    http://www.cesurturk.org/phpBB2/index.php
    http://www.cesurturk.org/index.php?ind=kureselisin ...
    http://www.saboces.gen.tr
    http://www.cesurturk.org
    http://r10kureselisinmayahayirseo-yarismasi.blogsp ...
    http://www.cesurturk.org/index.php?ind=reviews
    http://www.cesurturk.org/index.php?ind=gallery
    http://www.cesurturk.org/index.php?ind=news
  • geciktirici, on 12/23/2007, -0/+0http://www.hepzinde.com
    http://www.shopseks.com
    http://www.koz-metik.com
    http://www.vidrom.com
    http://www.picsrom.com
    http://www.vidmatic.com
    http://dafhne2005.blogspot.com/
  • yakomoz, on 12/24/2007, -0/+0Thanks...

    wmwebtr ödüllü seo yarışması
    www.r10.net Küresel Isınmaya Hayır Seo Yarışması
  • codhell, on 12/31/2007, -0/+0http://www.myrize.org
  • msnnickleri, on 12/31/2007, -0/+0http://www.msneklentisi.com
    http://www.tekno-logic.net
    http://www.orgudantel.com
  • garantisex, on 01/08/2008, -0/+0http://www.garantisex.com
  • Sevdaligeceler, on 01/19/2008, -0/+0http://www.sevdaligeceler.com
    http://www.fetishbdsmlife.com
    http://www.birak.in
  • gorele, on 01/22/2008, -0/+0görele
  • Fetching more discussions...
    Show 51 - 59 of 59 discussions
  •  

    Login or register to add a comment

    Create a new account or login to join in the conversation on Digg. You'll also be able to Digg stories to help promote things you like.


© Digg Inc. 2008 — Content posted by Digg users is dedicated to the public domain.
DIGG, DIGG IT, DUGG, DIGG THIS, Digg graphics, logos, designs, page headers, button icons, scripts, and other service names are the trademarks of Digg Inc.