Grow your CSS skills. Land your dream job.

Grid Accordion with jQuery

Published by Chris Coyier

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space.

Basic accordion from jQuery UI

One way to look at an accordion is like a collapsed single column of a table. I was recently building a page for a client site, where the information that they provided really made sense to present as a table. But it was too much information to view all at once. I thought it would have been overwhelming visually. I also thought that it was most likely that people visiting this page would know what they needed right away, so having them click once to get it seemed pretty reasonable. So, a table of accordions!

Another consideration in this table I was building is that there was enough columns that each individual column (should they have been equal width in the space available) wasn't very wide, maybe 150px. Some of these cells contained several paragraphs of text. A cell 150px wide with several paragraphs of text would awkwardly tall. Hence, the Grid Accordion is born!

The Grid Accordion works with the same theory as most other accordions. Only one cell is open at a time. The big thing is that the column of the current open cell expands to a reasonable reading width.

You can view and download the example at the end of this article. I'll go through some of the important bits next.

HTML: Classic use of the definition list

Accordions are perfect semantic examples of definition lists. A quick review of those:

<dl>
   <dt>Title</dt>
   <dd>Information about that title here</dd>
   <dt>Another Title</dt>
   <dd>Information about that other title here</dd>
</dl>

Our grid accordion will be made up of divs floated into a horizontal row. Each div contains the title for the column and an image, as well most importantly the definition list itself. Sample of one of those divs:

<div class="info-col">

	<h2>Batman</h2>
	
	<a class="image batman" href="http://jprart.deviantart.com/">View Image</a>
	
	<dl>
	  <dt>Super Power</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Costume</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Morality</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Sidekicks</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Vehicles</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	  <dt>Weaknesses</dt>
	  <dd>Consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</dd>
	</dl>

</div>

CSS: trying to stay accessible

Most of the CSS is just simple setup and not really worth covering here (full CSS file here).

One aspect that is worth covering those is accessibility. We need to "hide" all the information panels of the table by default. One of the ways we could do that is to set the dd elements to display: none; in the CSS. This is a seriously accessibility problems though, as many screen readers will obey that CSS and completely remove that information.

Instead, we can "hide" the cells by just kicking them outside the browser window.

dd { position: absolute; top: -9999px; left: -9999px; }

This is a classic technique. In fact, it's pretty common to see those exact CSS properties and values with a utility class name like this:

.screen-reader-text { position: absolute; top: -9999px; left: -9999px; }

We have another concern though. We're going to be using some jQuery animations to slideUp and slideDown the info cells. So we can't have them kicked off the page for typical viewers. We'll move the cells back when the JavaScript first runs and then have the JavaScript hide them.

The thing about the slideDown jQuery function is that it works best when it already knows what height the element originally was before it was closed or hidden, so it can smoothly animate itself back to that original height. If we used display: none; in the CSS, this function would have no idea how tall those cells are supposed to be. Kicking them off the page instead means that the original height will be calculated, keeping that animation as smooth as it can be. We just need to make sure that the cell is set to its "full" width so the height is calculated at the width the cell will be when it's visible.

dd { width: 299px; position: absolute; left: -9999px; top: -9999px; }

So at this point we have an accessible page of information, in that screen readers should be able to get all they need, and regular users have a smoothly operating system. However one thing that isn't fully addressed is simply having JavaScript turned off. In that scenario, the information cells are still hidden by CSS. Personally, I'm far more concerned about accessibility than I am about people who browse around with JavaScript turned off and a torch to bear. However if you are, feel free to either 1) Put in a <noscript> message or 2) remove the CSS hiding and just let there be a bit of a flash of content before the JavaScript hides the cells.

CSS: Fun with CSS3

The CSS3 pseudo class selector :nth-of-type is particularly useful with definition lists. Because the dt and dd elements alternate, and actually can be repeated or in any order, :nth-child would be a non-maintainable way to go. Let's color the cells of the table using :nth-of-type

dt:nth-of-type(1) { background: #b44835; }
dd:nth-of-type(1) { background: #b44835; }

dt:nth-of-type(2) { background: #ff7d3e; }
dd:nth-of-type(2) { background: #ff7d3e; }

dt:nth-of-type(3) { background: #ffb03b; }
dd:nth-of-type(3) { background: #ffb03b; }

dt:nth-of-type(4) { background: #c2a25c; }
dd:nth-of-type(4) { background: #c2a25c; }

dt:nth-of-type(5) { background: #4c443c; }
dd:nth-of-type(5) { background: #4c443c; }

dt:nth-of-type(6) { background: #656b60; }
dd:nth-of-type(6) { background: #656b60; }

For the rabble-rabble-IE-compatibility crowd, go ahead and add extra class names to the cells and do your coloring with those hooks.

One of the bits flair we are going to add is highlighting the current column. The class name of "curCol" will be applied and removed as needed via JavaScript. The current column will have a shadow around it, which of course is the perfect use for box-shadow:

.curCol { -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); z-index: 1; position: relative; }

While I was playing with this, I originally tried using some transforms to scale up the size of the current column. Ultimately I didn't like the look (one pixel lines look awful when scaled). I liked the shadows much better, but I found that the right edge of the shadow was being cut off the the next column. It was because that next column sat slightly above the current one in terms of vertical stacking order. Hence, the curCol class having the z-index and relative positioning, to make sure it sits on top of the others.

Randomly, I also discovered that the transform property also solved the problem. As in, setting -moz-transform: scale(1); (which scales something to 100%, or basically, does nothing to unscaled elements) also worked by making the shadow visible. In other words: using transforms on elements affects their vertical stacking order. I'm just not sure how it all works exactly quite yet.

jQuery JavaScript

Again I won't cover every line of this (you can see the full file here). Here is the logical structure though:

  1. When a <dt> is clicked...
  2. If it's the currently active cell, do nothing
  3. Otherwise...
  4. Close all open cells
  5. Shrink old title
  6. Enlarge new title
  7. Open new cell
  8. Mark the current column
  9. Make sure current column is expanded and others are shrunk

Couple of interesting things...

I would have normally used the .live() function to handle the clicks on the dt elements. But the newfangled hip way to handle this in jQuery is using .delegate()

$("#page-wrap").delegate("dt", "click", function() {
  // do stuff
}

Where live would have to watch the entire document for clicks, delegate limits that watching to only the page-wrap, which is more efficient.

I showed this to Doug Neiner, and he also suggested that clicking on the photos in each column would only open the column. Then if clicked again, they would actually go to the artist's website (where the href of each image links to). The trick here was to prevent the default action (going to the link) when clicking on an image if it's not the current column. Instead, divert the click to the first title in that column (which will open it). We can use delegate for this again:

$("#page-wrap").delegate("a.image","click", function(e) { 
    
    if ( !$(this).parent().hasClass("curCol") ) {         
        e.preventDefault(); 
        $(this).next().find('dt:first').click(); 
    } 
    
});

Demo and Download

View Demo   Download Files

Until I figure out some good licensing system... just a reminder than any downloadable example like this on this site you can use to do whatever you want with. Preferably, use it in big corporate projects and make boat loads of cash. Or, show it to your friends and tell them you did it so they will think you are awesome.

Comments

  1. Very very cool – one of the problems I constantly run into is users want to display ALL THE DATA IN THE WORLD in a single table. This would help!

  2. arnold
    Permalink to comment#

    ah thanks. this so interesting and yes! it its cool.

  3. “Preferably, use it in big corporate projects and make boat loads of cash. Or, show it to your friends and tell them you did it so they will think you are awesome.”

    In all your seriousness, that’s hilarious. This script is incredible though, you always bring something new to the table, I’m sure these types of accordians will sprout up everywhere. Oh and nice CSS3 shadow you have on the highlighted section in the grid accordian.

  4. Great, nice way to come up with great idea out of the usual accordions.

  5. Permalink to comment#

    Neat – another great jQuery effect Chris. Pretty nice examples too and neat use of CSS3 ! Keep up the great work.

  6. That is really smooth, it would work great for a site map.

  7. Quite handy I think, but if you wanna print the content on Safari Mac 4.0.4 well… you’re doomed (just like the doctor)! Be sure to make everything appear in some kind of content so your clients don’t come asking why blank pages are coming out of the printer. Firefox 3.6 Mac seems to deal with this appropriately thought.

    Thanks again Chris for this demo!

  8. I really really like this – very slick. The animation’s a little bit jerky on Firefox and Chrome on XP, but I don’t think that matters much.

    Good work! And nice semantic HTML too :)

  9. wow… too impressive. Many useful techniques on this article, now I understand why many of my attemps to slideDown things went totally wrong (I was hidding the elements in the CSS). I certainly learned a lot jQuery useful functions today :D (I didn’t even know some of them existed)

    Thanks a lot!

  10. This looks great, I already have a couple things in mind on what I can use this for.

    Also..

    “…Preferably, use it in big corporate projects and make boat loads of cash. Or, show it to your friends and tell them you did it…”

    Your awesome. Just awesome!

  11. I haven’t read through the script yet but that effect is brilliant looking. Not exactly sure what I will use it for but I WILL USE IT!

  12. Great script, thanks.

    Is there any way to make two separate divs in an accordion stay open at the same time? In this example, if I wanted to view both a hero’s Superpower and Costume without either one closing?

  13. Thanks for another great insight Chris.
    And for of course your sharing. This will make great fodder for the new site “itsassimpleasthat.com”

    Thanks again for this, and you’re ongoing updates to your book.

  14. Permalink to comment#

    Wooow, this is cool ideea! Thanks a lot for posting these nice articles!

  15. Martijn
    Permalink to comment#

    Reminds me of this two year old post on cssnewbie:

    http://www.cssnewbie.com/css-only-accordion

  16. Sam
    Permalink to comment#

    This is amazing. You are amazing.

  17. just awesome as always, specially the clean markup and the smooth animations.

    thanks for sharing

  18. Why if I add a link like this :

    <a href=”http://google.fr/” rel=”nofollow”>google.fr</a>

    it doesnt work in any browser : ff, ie, opera …

    • You may need to update the example code where it’s looking for all links “a”, to something more specific like “.main-image”. Or just remove that bit of code.

  19. Eamonn
    Permalink to comment#

    Sweet! Very timely as well, I’m going to *try* to adapt it to a family-tree type table… erm.

    BTW Where’s Chuck Norris in this list?

  20. silvers
    Permalink to comment#

    wow!

    i feel like i owe you money man. the stuff you do is absolutely phenomenal and i can’t imagine how busy you must be!

    I definitely want to use this to display some information on my own sites. your explanations are incredible.

    please don’t die any time soon because you are single handedly dragging me in to a web design career that is going to save me from mediocrity. you have saved my life.

  21. So cool… I saw this when you twittered about it last week. I’m going to play with it and see if I can tweak it to have a hover state on the “cells” to indicated that they’re clickable and maybe have the inactive columns become grayed out so that the focused column shows up even more prominently.

    This will be a great practice for my jQuery/CSS tweaking skills. :)

  22. Anil
    Permalink to comment#

    Great Trick,

    That’s why Chris i am fan of you.

  23. John
    Permalink to comment#

    This is so cool. Haven’t seen this before and I think it’s a great solution for much data!

  24. Hitesh
    Permalink to comment#

    very cooooooooooooool

  25. Doesn’t quite work without javascript. How about doing the positioning of the DD’s with JS instead of CSS? That way, if no JS, all the data is displayed.

  26. Great ! thanks

  27. SFdude
    Permalink to comment#

    Coolest of cool…super-compact
    presentation of data.

    As poster above suggested,
    would be nice to highlight the links,

    ie: Strenghts/Sidekicks/…etc,

    when User hovers mouse over each link,
    to suggest the link is clickable).

    GREAT, Chris!
    SFdude

  28. Chris, this is like really awesome! You are the man!

    I really need to step up my game and learn jquery/javascript.

  29. Permalink to comment#

    hohoho…awesome

  30. wow, amazing

  31. Looks excelent. Very useful stuff, thank you!

  32. Permalink to comment#

    This looks awesome and very useful. I’m already seeing some great uses for this on my company’s website.

    The concern I have is that without javascript the info is not visible. I know a very small percentage browses without javascript, and those people should be used to things looking pretty screwed up around the web. It’s just tough when you’re doing a company site, because you sort of have to cater to the lowest common denominator in terms of visitors.

  33. This is a really creative concept, thanks for sharing!

  34. julz
    Permalink to comment#

    Very cool! Thanks for sharing.

  35. Blackdynamo
    Permalink to comment#

    This doesn’t seem to work properly in IE8. I get it working in IE7 but doesn’t animate the column transitions in IE8. Even in the online demo.

    Not working
    Windows 7 64 Bit
    IE8

    Working
    Windows 7 64 Bit
    IE8 in IE7 compatibility mode
    Firefox 3.6
    Chrome
    Safari

    • Permalink to comment#

      This is possibly the coolest demo I’ve ever seen on css-tricks; however it does seem to crunch in IE8. It almost seems like IE is /trying/ to animate but it just can’t handle all the processing that goes into play.

      But I can’t blame Chris for IE crapping out, and like I said, its way cool. Definitely worth fiddling with for a real client website!

  36. Miguel
    Permalink to comment#

    Wow chris probably my favorite effect you’ve posted so far I love this thing. The posibilities are endless.

  37. Wow, this is awesome.

  38. Hey, maybe this license fits your needs?

    http://sam.zoy.org/wtfpl/COPYING

    ;)

    PS: Excellent grid. I might incorporate it somewhere.

  39. Josh
    Permalink to comment#

    This is awesome!

  40. Whoah, this is amazing!

  41. Great tutorial! I have a question though: Is there a way to make the grid auto-closing with a click outside or after period of time?

  42. Ali
    Permalink to comment#

    Thanks for this great work, again ;)

  43. Flick
    Permalink to comment#

    I agree – this is some brilliant solution and just what I’m looking for to display a short Discography! :)

    • Flick
      Permalink to comment#

      Sorry, I have a very silly question here – have been trying to use it with WordPress and can’t seem to get rid of the ‘is not a function’ message despite trying variations of jQuery(document).ready(function($){. Any help would be much appreciated!

    • Flick
      Permalink to comment#

      Apologies for the multiple posts. Just to say that the issue was resolved once I linked to the Google API version of jQuery – 1.4.2 – as featured in this article.

      The current one shipped with WordPress is 1.3.2 and from what I’ve understood, .delegate only became a feature in 1.4.2.

    • Correct. Delgate is brand new. Also, the versions of jQuery that WP ships with are usually automatically in noConflict mode, so using like

      var $j = $.noConflict();

      Then using $j anywhere you would use $ is the way to go. I almost always enqueue the latest version of jQuery straight from Google and don’t mess with all that.

  44. My biggest concern is the fact you mixed DC & Marvel.

  45. Permalink to comment#

    That’s pretty good
    Thank you Chris!

  46. Permalink to comment#

    I did exactly this without JavaScript using the target pseudo class and came up with a solution that works in IE6+ – http://www.thecssninja.com/css/accordian-effect-using-css.

  47. Permalink to comment#

    Thanks Chris. This is really awesome. Keep rockin’!

  48. That was very cool. I was not sure how it would function at first glance, but that is so functional. Great work!

  49. John Pisello
    Permalink to comment#

    Copious awesomeness, and nary a “rel” attribute in sight! I love it!

  50. Joseph Laidler
    Permalink to comment#

    When I close my eyes at night, I dream of having your mad skills. Thanks for sharing this.

  51. Gourmador
    Permalink to comment#

    Thanks a lot Chris!
    You are a great teacher for this whole code stuff…

  52. Very cool work indeed, an awesome idea that will really serve useful!

  53. Absolutely Brilliant..!
    A great way for small, resume sites..!

    • I agree… I couldn’t resist the temptation to do mine with it :)

      And adding the hack of Michał Czernow make it works in IE7+ like a charm.

      Excellent article… and excellent tool!

      Way to go!
      Will

  54. Ryan
    Permalink to comment#

    Can you do this within a wordpress page?

  55. Tim
    Permalink to comment#

    I really like this demo, it´s cool. There is just one or two things I would add.

    1: Hover Effekt
    2: Real A-Tags, to trigger the animations on :focus (Yeahh, I do use the Tab Key sometimes ;-)

  56. Permalink to comment#

    Cool effect Chris! Verry handy, but not for everyone.

    One thing. It would be nice if you can see all the content when javascript is disabled.
    You want the website to be accesible for eveyone.

    • Jonny Irving
      Permalink to comment#

      Very good point that I missed as you can’t see any of the content without javascript. Perhaps set the boxes at their full view to start and then change them to their smaller state onready??

    • I covered accessibility in the article a bit. The content is accessible for screen readers. It is broken for CSS-On JavaScript-Off people though. If you wanted to fixed that, you’d just remove the position absolute kick-off-the-page stuff in the CSS, as well as the hard coded width. It would look pretty awkward for javascript off people, and javascript on people would see an awkward flash of content before it gets hidden. If you are cool with those things, go for it.

  57. Jonny Irving
    Permalink to comment#

    Very cool, I’ve been looking around for something like this for a while. The height and width changing accordion has been really tricky for me. I still haven’t found a way to make it work as a toggle. This comes very close though.

  58. zubair sota
    Permalink to comment#

    thanks a lot.. I’m searching same since long & finally i got what i want..

  59. Lucas Davies
    Permalink to comment#

    That is incredibly slick…if only I had a project to utilise it :)

  60. Super Tutorial.. I will try it on my theme

  61. Jeff Dion
    Permalink to comment#

    Very nice effect, could be really cool in a “compare these products”. I still have an interogation though, how would it degrade if someone doesn’t have javascript enabled?

  62. Mr. Chris thanks for this wonderful tutorial, i’m an ardent reader of your blog all the way from Nigeria, pls i want to make a special request, i beg you in the name of God, can you make a screencast of this tutorial pls, because i really need it. Thanks once again and remain bless.

  63. An awesome menu which would take a sitemap to a new level. Most impressed!!!

  64. I love you man, your work is stupendously amazingly brilliant!

    Such a selfless guy, with so much drive. It would be hard to not aspire to be a man with so much talent.

  65. Kaz
    Permalink to comment#

    Love it! Very generous of you to let people download your examples!

    I’ve been playing around with it a bit, and noticed, on a black background, some of the white borders are missing.

    See pic… http://ftpwtf.au.com/lines.gif

    I’ve tried a few things, but I can’t seem to get them back!

    Can anyone shed some light on the matter?

    Kind Regards!

  66. Arrrrghhh, this is awesome. You rock Chris!

  67. Permalink to comment#

    Enorme Chris !!

    I’m Stoned by your Job !! .. .

    (french guy, french comment)

  68. Permalink to comment#

    Love it man.

  69. Permalink to comment#

    Simply awesome. Can see 12 uses for this.

  70. Aaargh must find client use for this right now! Soooo nice, thank you!

    And can’t believe it animates better in IE6 than IE8 :) Oh man that IE9 hype better live up to itself.

  71. Looks rad Chris. Can’t wait to try it. Thanks for sharing.

  72. The first thing I tried was to navigate with the arrow keys. I reckon that’d be the next step.
    And +1 on the making it work with CSS on JavaScript off comment earlier, I wouldn’t want content to only be accessible with js on.
    I’m not all critical though, I really like the concept!

  73. jonathan
    Permalink to comment#

    Hi Chris

    Great work yet again. Would it be possible to create / copy / duplicate this whole block below so you can have a whole new category like Super Hero Animals ;-)

    Thanks

    Jonathan

  74. gerry
    Permalink to comment#

    how am i able to style up each column in different colours ???

  75. This effect is absolutely amazing!!! One of the reasons I am making the transition from print to web. You just can’t achieve that kind of magic in print.

    I really want to find an excuse to implement this now!

  76. Permalink to comment#

    It’s so very cool!

  77. Tim
    Permalink to comment#

    Really nice effect. Cheers Chris.

    The only issue I have found is that it seems to have killed the scrollbar functionality when added within a site (and infact when I have just tested the demo). Not sure whether this was intended, but for the life of me I can’t work out how to get this functionality back.

    Most of my attempts have been focused around “clear: both”, but I might be totally on the wrong track. Any tips?

    • Tim
      Permalink to comment#

      And as soon as I send that, I realise the schoolboy error I made in not checking that the html and body had been set to height: 100% and overflow: hidden.

  78. This is really really cool. I was searching for such a css-/jquery-based accordeon for a while and these existing solutions didn’t fit to me.
    Thanks for sharing, Chris! I will use it in my actual project of a shop with several product groups to explain what they are selling.

    Tanks a lot!
    Oliver

  79. This is pretty interesting … I never had such a need, but if I ran into this, I’ll remember to come back here …

  80. thom
    Permalink to comment#

    thx as much my friend!

    great tool for creating a whole webpage too.

    nice greez
    thom

  81. Awsome! This menu can be used in million of cases!

    Thanks and greetings from Germany
    Flo

  82. Excellent demo. Take it up a notch by adding full keyboard support (up and down arrows, for example).

  83. Great tutorial :) this could be an interesting way to show employees in a small business too.

    I’ll be keeping this for reference.

  84. Mike
    Permalink to comment#

    First off I just want to tank you on this great tutorial and Idea! From the first day I read it I have not been able to get it out of my head. So I am playing with it today.

    2nd are there any examples of “Michał Czernow” solution for IE? Still have not wrapped my head around that fix yet. Do I remove the CSS3 and just use old CSS?

    3rd When I add extra tabs and include more info in each tab that is more than a screen can hold, I do not get a scroll bar or the ability to go to the bottom of the page. My footer drops but the tabs expanded content stops at the browser’s windows size. Any ideas on how I can fix that? I would prefer to scroll the whole web page and not add scroll bar over flows for the expanded tabs. Also on smaller screens the browser does not give off the side scroll bars also. So content to the right of the screen is cut off.

    Thanks, Mike

    • Mike
      Permalink to comment#

      Fixed the 3rd thing, just after i posted,ha ha. I removed the overflow hidden from the body, I then had to change and add some extra css to keep the black background while scrolling.

      Mike

  85. Nice, use of jquery.

  86. Lasse
    Permalink to comment#

    Great interfacing! This is probably easier than I think: How do I make it so the first info-col is exoanded on page load? Thanks

  87. Wow Chris! This is really great! Thanks for sharing this with us!

  88. Permalink to comment#

    any word on how to implement the ie fix? Not the classes, but the solution mentioned in the comments?

  89. Permalink to comment#

    Fantastic, Awesome

  90. Wow cool effect! Thanks Chris this is really great effect.

  91. Don
    Permalink to comment#

    really nice in FireFx but with IE8 there’s a flickering effect. Probably handling of the click events.

  92. Permalink to comment#

    Hi,
    using this at http://jasondaydesign.com

    I have one issue. If I add a thumbnail, and float the image left or right with very little text, the dt element below isn’t spaced properly. The thumbnail ends up floating over the the other elements when it’s dt is the active element.

    Thoughts on how to overcome? (i’ve tried a div, class, etc.)

  93. Very nice tutorial bro well explained followed it and works great

    thanks a bunch.

  94. Unique Point of view.
    THank you very much will come in handy!

  95. Awesome use of JQuery, thanks Chris. If the licence offer still stands I will use this in an web application that I’m converting to an EXE in the future.

    Cheers
    miike

  96. Matt

    Hi,

    Is there any way to close the opened cell if the title is clicked on for a second time? Therefore being able to toggle a cell open and closed without clicking on other cells.

    Thanks

    Matt

  97. ALI

    hey there, great work! wow! but one question: i inserted links (using it as a sitemap) but they don’t work. what do i have to do to make them work? i inserted the links with regular <a href…

    please, please, please can you give me a workaround?

    cheers, ALI.

  98. ALI

    ok nevermind, a good friend of mine helped me out (onClick…). What a shame it doesn’t work on IE8 (is there or is there not a fix for that?).

    Still: Superduper work and exactly what i was looking for.

    Thx again and sorry for the double-posting.

    ALI.

  99. Rics

    thank you for this accordion!
    really cool!

    i’ve used for a website:

    http://www.loudnproud.it

    But i’ve the “dt” css backgrounds rules not working in IE7& IE8.

    In firefox the oblique lines background is correctly showed, but all the css background attributes like color and image aren’t read form IE.

    How i can solve this?

  100. reachelmax
    Permalink to comment#

    Hello!

    I have got problem. I love this script but maybe you know…

    how to change color in other group in 1st position?

    dt:nth-of-type(2) { background: #ff7d3e; }
    dd:nth-of-type(2) { background: #ff7d3e; }

    You know like this ….

    dt1:nth-of-type(2) { background: #ff7d3e; }

    dt2:nth-of-type(2) { background: #00000; }

    i dont have got idea how to change nth-of-type… Thanks for help Reachelmax

  101. abin

    how do i use it multiple times in same page???

This comment thread is closed. If you have important information to share, you can always contact me.

*May or may not contain any actual "CSS" or "Tricks".