Comments on: Create the accordion effect using CSS3

By: daniel

daniel — Mon, 07 Nov 2011 01:52:44 +0000

I’m having a crack at html5/css3. every example for an accordian results is the page jumping around each time the transition is started,doesn’t work with height:auto; and the extras required for ie are a joke.

has anyone found a solution for this?

this is a good tutorial thanks for the efforts, but a terrible solution. html5 is definitely not the flash killer it claims to be.

By: Fabiola Singh

Fabiola Singh — Tue, 18 Oct 2011 14:03:43 +0000

hello, I implement your accordion in my page, looks good but i have one concern, for some reason the firsts links is hidden, if you try to click on the 2nd o 3rd section i have to move the mouse and scrool up to find the text.
https://globalcallforwarding.com/GlobalCallForwarding-web/FAQS.htm

Thanks for your help.

By: Ryan Seddon

Ryan Seddon — Sun, 02 Oct 2011 23:31:19 +0000

@Shawn - Unfortunately due to the nature of anchor links clicking it again won't remove the anchor from the address bar which the :target pseudo-class relies upon. That sort of functionality would require javascript.

By: Micha

Micha — Sat, 17 Sep 2011 15:56:07 +0000

Hi Ryan,

sorry for my English I’m from Germany1

very Nice Tutorial but i have a little problem. I created a list which is larger than my display. If i click on one of the sections my page skips down to the section and this is not very nice.

I hope you can help me! THANKS A LOT

By: Shawn

Shawn — Fri, 16 Sep 2011 17:23:34 +0000

I was curious if besides reloading the page, there is a way to load all pleats of the accordion closed. My thing is that I need to have the accordion start off closed and then I need the pleats to close when folks click other pleats, but also, I was hoping to have this set up so that it can close if someone clicks the pleat again. I think that someone else asked a similar question, but I didn’t fully follow the response.

Thanks!
Shawn

By: Bram de Haan

Bram de Haan — Sun, 28 Aug 2011 10:47:08 +0000

Beside the point of this great tutorial, but anyway one could include a pure CSS dropdown-icon:

<a href="#Section1" rel="nofollow">Section 1</a>

/* Dropdown-icon */
.dropdown-icon {
  border-color: #EEE transparent transparent;
  border-right: 5px dashed transparent;
  border-style: solid dashed dashed;
  border-width: 5px 5px 0;
  display: inline-block;
  font-size: 0;
  height: 0;
  left: 6px;
  line-height: 0;
  position: relative;
  top: 0;
  width: 0;
}

By: Ryan Seddon

Ryan Seddon — Sun, 21 Aug 2011 23:06:23 +0000

@take flight - Of course! If you adjust the CSS you can make it show horizontally and the rather than do height: auto; you use width and floats.

By: take flight

take flight — Fri, 12 Aug 2011 04:46:59 +0000

Is there a way to use this modify this code to make it work horizontally?

By: Slider Navigation gesucht - XHTMLforum

Slider Navigation gesucht - XHTMLforum — Thu, 26 May 2011 19:25:50 +0000

[...] [...]

By: 10 Most Useful CSS3 Navigation and Menu Tutorials for Every WebDesigner | Colors 7

Tue, 10 May 2011 11:37:07 +0000

[...] 6. Create the Accordion Effect Using CSS3 [...]