This is a plugin that collapse a HTML box by using the CSS 3 transitions for the accordion opening/closing animation

This plugin, obviously, does not show the opening/closing animation for the hidden boxes on older browsers like Internet Explorer 7/8/9 because they does not support the CSS 3 transition rules.

The behavior on these browsers will be a simple hide/show of the hidden content.

Remember that you have to adjust in the css the max-height of your boxes to be sure that your hidden content will be visible for any resolution (you can put a very high value, but remember that the closing animation starts from this value when it collapses the box, so maybe it could be very slow).

Example 1: Buttons that show content below

Collapsible Box

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi et tortor at massa imperdiet pretium eu et diam. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Pellentesque quis ornare purus. Mauris dignissim dolor et semper vulputate. Vivamus interdum libero ex, a blandit purus pulvinar ac. Maecenas finibus feugiat ultrices. Morbi vitae lobortis lacus. Nullam enim massa, eleifend at sagittis imperdiet, auctor a arcu. Mauris fermentum dignissim lorem, vel feugiat elit varius sed. Ut vel sem at est convallis rhoncus nec nec lorem. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas vitae quam mauris.

Collapsible Box

Duis vel ultrices nulla. Sed magna eros, eleifend eu semper nec, rhoncus at ligula. Aliquam tincidunt eget felis ut varius. Suspendisse lobortis eleifend bibendum. Sed volutpat sapien ut lectus feugiat, id ultrices nunc dapibus. Duis dolor mauris, condimentum vitae auctor sed, placerat at ante. Integer id vulputate nisl. Aenean aliquet metus mauris, eget tincidunt neque tincidunt id. Ut eu fermentum ante, scelerisque posuere libero. Mauris consectetur pretium nunc, eu varius eros sagittis ac. Nulla ullamcorper at dui eget lobortis. Aliquam mattis velit vitae erat vulputate, ac placerat eros semper. Donec id rutrum augue, sed facilisis ipsum.

Collapsible box

In hac habitasse platea dictumst. Donec bibendum, libero vitae facilisis molestie, eros orci mattis massa, nec fermentum velit nulla non sem. Duis laoreet quam nulla, quis consectetur velit bibendum in. Donec mattis lorem nunc. Phasellus sapien magna, molestie quis ante id, tempus dictum ligula. Quisque eu nisi ut augue efficitur mattis ut nec orci. Vivamus ornare dui eu convallis sollicitudin. Fusce non nibh sit amet purus sagittis lobortis. Sed bibendum et neque vitae tempor. Integer fringilla nisl sit amet tincidunt pharetra. Sed non aliquet nulla. Donec quis interdum ipsum. Nunc pretium eleifend felis, a malesuada nisl finibus ut. Cras tempus vitae nibh ut auctor.

Collapsible box

Aliquam quis tincidunt elit. Suspendisse lobortis, turpis nec vehicula finibus, diam odio vulputate turpis, id faucibus lectus ex ut leo. Donec augue ipsum, commodo nec ultricies at, rutrum a erat. Suspendisse mi justo, pretium in tellus vitae, laoreet luctus felis. Nunc efficitur ipsum sit amet ligula dictum imperdiet. Donec vitae eleifend massa, in pellentesque ante. Ut tincidunt dolor sem, sed tempor arcu dictum eu. Mauris ullamcorper fermentum ex id sagittis.

Example 2: Links that show content below and Icon-fonts switch

Collapse

Montes nascetur ridiculus mus mauris vitae ultricies. Gravida neque convallis a cras. Fringilla urna porttitor rhoncus dolor purus. Nunc mi ipsum faucibus vitae aliquet. Proin libero nunc consequat interdum varius sit amet mattis. Pulvinar pellentesque habitant morbi tristique senectus et netus. Sem et tortor consequat id porta nibh venenatis cras sed. Nec tincidunt praesent semper feugiat nibh sed pulvinar. Ut aliquam purus sit amet luctus venenatis lectus magna. Justo nec ultrices dui sapien eget mi. Nunc sed velit dignissim sodales ut eu sem. Pretium fusce id velit ut tortor pretium viverra. Velit egestas dui id ornare arcu odio. Aliquam eleifend mi in nulla. Netus et malesuada fames ac turpis egestas maecenas pharetra convallis. Aliquet lectus proin nibh nisl condimentum id venenatis. Purus faucibus ornare suspendisse sed nisi. In fermentum et sollicitudin ac orci phasellus egestas tellus rutrum. Vulputate sapien nec sagittis aliquam malesuada bibendum.

Pharetra sit amet aliquam id diam maecenas ultricies. Sit amet cursus sit amet dictum sit. Ut porttitor leo a diam sollicitudin tempor id eu nisl. Est placerat in egestas erat imperdiet. A pellentesque sit amet porttitor eget dolor. Habitasse platea dictumst quisque sagittis purus sit. Cursus eget nunc scelerisque viverra mauris in aliquam. Et ligula ullamcorper malesuada proin libero. Iaculis eu non diam phasellus vestibulum lorem. Mus mauris vitae ultricies leo. Semper feugiat nibh sed pulvinar proin gravida. Purus in mollis nunc sed id semper risus in hendrerit. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit. Mattis enim ut tellus elementum sagittis vitae et leo duis. Leo duis ut diam quam nulla porttitor massa id neque. Cursus mattis molestie a iaculis at erat pellentesque adipiscing commodo. Massa tempor nec feugiat nisl pretium.

Collapse

Amet luctus venenatis lectus magna fringilla urna. Felis bibendum ut tristique et egestas quis ipsum. Sagittis id consectetur purus ut faucibus pulvinar elementum. Tellus rutrum tellus pellentesque eu tincidunt tortor. Lorem dolor sed viverra ipsum nunc. In vitae turpis massa sed elementum tempus egestas sed. Pellentesque habitant morbi tristique senectus et netus et malesuada fames. Neque vitae tempus quam pellentesque. Vitae ultricies leo integer malesuada nunc. Ornare massa eget egestas purus. Egestas maecenas pharetra convallis posuere morbi leo urna. Morbi tristique senectus et netus et. Pulvinar mattis nunc sed blandit. Mi in nulla posuere sollicitudin. Ut ornare lectus sit amet est placerat in egestas. Netus et malesuada fames ac. Aenean vel elit scelerisque mauris pellentesque pulvinar pellentesque habitant. Eget nunc scelerisque viverra mauris in aliquam sem fringilla. Erat pellentesque adipiscing commodo elit at.

Dis parturient montes nascetur ridiculus mus mauris vitae. Ullamcorper morbi tincidunt ornare massa eget egestas purus viverra accumsan. Potenti nullam ac tortor vitae purus faucibus ornare suspendisse. Tempus imperdiet nulla malesuada pellentesque elit eget gravida. Magna fringilla urna porttitor rhoncus dolor purus non enim. Ut diam quam nulla porttitor massa id. Luctus venenatis lectus magna fringilla urna. Pharetra convallis posuere morbi leo urna. Auctor eu augue ut lectus arcu bibendum at varius vel. Aenean euismod elementum nisi quis eleifend quam adipiscing. Sit amet mattis vulputate enim nulla aliquet porttitor lacus. Venenatis lectus magna fringilla urna porttitor rhoncus dolor purus. Et odio pellentesque diam volutpat. Volutpat blandit aliquam etiam erat. Bibendum neque egestas congue quisque egestas. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Varius sit amet mattis vulputate enim nulla. Orci phasellus egestas tellus rutrum tellus pellentesque eu tincidunt tortor.

Example 3: Accordion

Accordion Option 1

Accordion Option 2

Accordion Option 3

Suspendisse porta risus nisl, id pretium augue suscipit ac. Fusce elementum lobortis auctor. Aliquam vel risus vitae dui semper accumsan. Cras ornare maximus tellus, quis vestibulum erat sodales at. Maecenas metus massa, ornare id sem placerat, fermentum vestibulum elit. Suspendisse vel erat eget nisl lacinia vehicula. Duis sed lorem tincidunt, egestas magna non, dignissim mauris. In vitae lorem eu nulla suscipit viverra. Aenean eget imperdiet augue, condimentum tincidunt metus. In hac habitasse platea dictumst. Nulla ornare fringilla accumsan. Praesent lorem arcu, congue ut enim nec, tincidunt porttitor leo. Fusce accumsan dignissim elit, eu ornare felis.

Vulputate odio ut enim blandit. Aenean pharetra magna ac placerat vestibulum lectus mauris ultrices. Eget egestas purus viverra accumsan in nisl. Curabitur vitae nunc sed velit dignissim sodales ut eu sem. Donec massa sapien faucibus et molestie ac feugiat. Egestas sed tempus urna et pharetra. Enim blandit volutpat maecenas volutpat blandit aliquam. Faucibus scelerisque eleifend donec pretium vulputate sapien nec sagittis. Fringilla est ullamcorper eget nulla. Libero nunc consequat interdum varius sit amet mattis vulputate. Fringilla urna porttitor rhoncus dolor purus non enim praesent elementum. Erat velit scelerisque in dictum non consectetur a erat nam. Sagittis nisl rhoncus mattis rhoncus urna. Amet tellus cras adipiscing enim eu turpis egestas pretium aenean. Condimentum lacinia quis vel eros donec ac odio tempor. Proin sed libero enim sed faucibus turpis in.

Accordion Option 4

Consequat mauris nunc congue nisi vitae suscipit tellus mauris a. In hac habitasse platea dictumst quisque. Nunc sed blandit libero volutpat sed. Odio euismod lacinia at quis risus sed. Id diam vel quam elementum pulvinar. Semper risus in hendrerit gravida rutrum. Ultrices vitae auctor eu augue ut lectus. Ornare arcu odio ut sem nulla pharetra diam sit amet. Congue mauris rhoncus aenean vel elit scelerisque mauris. Sed vulputate odio ut enim. Consequat nisl vel pretium lectus quam id leo in vitae. Arcu ac tortor dignissim convallis.

Id aliquet lectus proin nibh nisl condimentum id. Semper feugiat nibh sed pulvinar proin gravida hendrerit lectus a. Morbi tincidunt ornare massa eget egestas purus viverra accumsan. Nam at lectus urna duis convallis. In mollis nunc sed id semper risus in. Nunc mattis enim ut tellus. Neque egestas congue quisque egestas diam. Sed velit dignissim sodales ut eu sem integer vitae justo. Sed felis eget velit aliquet sagittis id consectetur purus ut. Lacinia quis vel eros donec ac odio tempor orci dapibus. Semper viverra nam libero justo laoreet. At volutpat diam ut venenatis tellus in metus vulputate eu. Tortor at risus viverra adipiscing at in tellus integer.

Example 4: Buttons that show content below with "no scroll" function at the click

Collapse

Ultrices gravida dictum fusce ut placerat orci nulla. Pulvinar mattis nunc sed blandit. Ut etiam sit amet nisl purus in mollis. Proin sed libero enim sed faucibus. A diam maecenas sed enim ut sem viverra aliquet eget. Neque ornare aenean euismod elementum nisi quis eleifend quam. Nisl vel pretium lectus quam. Leo in vitae turpis massa sed elementum tempus egestas sed. Condimentum lacinia quis vel eros donec ac odio. Sit amet est placerat in egestas erat imperdiet sed. Ipsum dolor sit amet consectetur adipiscing elit pellentesque habitant morbi.

Enim nulla aliquet porttitor lacus luctus accumsan tortor. Faucibus vitae aliquet nec ullamcorper sit amet risus nullam eget. Pharetra pharetra massa massa ultricies mi. Vitae ultricies leo integer malesuada nunc vel risus commodo. Vitae congue eu consequat ac felis donec et odio. Viverra mauris in aliquam sem fringilla ut. Hendrerit gravida rutrum quisque non tellus orci ac auctor augue. Quis enim lobortis scelerisque fermentum dui faucibus in ornare. Enim ut sem viverra aliquet eget sit amet tellus. Vitae et leo duis ut diam quam nulla. Quis viverra nibh cras pulvinar mattis nunc sed. Venenatis lectus magna fringilla urna porttitor. Id faucibus nisl tincidunt eget nullam non nisi est. Lorem ipsum dolor sit amet consectetur adipiscing elit ut. Libero nunc consequat interdum varius. Massa id neque aliquam vestibulum morbi blandit.

Collapse

Id velit ut tortor pretium viverra suspendisse potenti nullam. Augue lacus viverra vitae congue eu consequat. Donec ultrices tincidunt arcu non sodales neque sodales ut etiam. Nec ultrices dui sapien eget. Ut faucibus pulvinar elementum integer enim neque volutpat ac tincidunt. Aliquet sagittis id consectetur purus ut. Malesuada fames ac turpis egestas integer. Mattis enim ut tellus elementum sagittis vitae et. Iaculis at erat pellentesque adipiscing commodo elit at imperdiet dui. Orci eu lobortis elementum nibh tellus. Sit amet facilisis magna etiam tempor orci eu lobortis elementum. Amet consectetur adipiscing elit duis tristique sollicitudin nibh. Ac auctor augue mauris augue. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et netus. Habitant morbi tristique senectus et netus. Aliquam vestibulum morbi blandit cursus risus. Sit amet mauris commodo quis imperdiet massa tincidunt. Cras tincidunt lobortis feugiat vivamus. Pretium nibh ipsum consequat nisl vel pretium lectus quam id.

Turpis tincidunt id aliquet risus. Ornare aenean euismod elementum nisi. Amet risus nullam eget felis eget nunc lobortis mattis. Vel pharetra vel turpis nunc. Nulla malesuada pellentesque elit eget gravida cum. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Porttitor rhoncus dolor purus non enim. Feugiat pretium nibh ipsum consequat nisl vel pretium. Libero enim sed faucibus turpis in eu mi bibendum. Semper auctor neque vitae tempus. Vestibulum mattis ullamcorper velit sed ullamcorper morbi. Metus vulputate eu scelerisque felis imperdiet proin. Auctor urna nunc id cursus metus aliquam eleifend. Purus sit amet luctus venenatis.

Example 5: Content already shown when the page load and text change when opened/closed

Urna nec tincidunt praesent semper feugiat. Enim eu turpis egestas pretium aenean pharetra magna. Amet purus gravida quis blandit. Tincidunt praesent semper feugiat nibh. Nibh nisl condimentum id venenatis a condimentum vitae sapien. At urna condimentum mattis pellentesque id nibh tortor id. Neque gravida in fermentum et sollicitudin ac orci phasellus. Tincidunt dui ut ornare lectus. Scelerisque mauris pellentesque pulvinar pellentesque habitant morbi. Mattis molestie a iaculis at erat. Leo integer malesuada nunc vel risus commodo viverra maecenas accumsan. Hendrerit gravida rutrum quisque non tellus orci ac. Cras adipiscing enim eu turpis. Massa id neque aliquam vestibulum morbi blandit cursus risus. Pretium vulputate sapien nec sagittis aliquam malesuada bibendum arcu.

Amet aliquam id diam maecenas ultricies mi eget mauris pharetra. Mi tempus imperdiet nulla malesuada pellentesque. Integer malesuada nunc vel risus commodo viverra maecenas accumsan lacus. Placerat in egestas erat imperdiet sed euismod nisi porta. Enim blandit volutpat maecenas volutpat blandit aliquam etiam erat velit. Aliquet enim tortor at auctor urna nunc id cursus. Rhoncus mattis rhoncus urna neque viverra justo nec ultrices. Diam sollicitudin tempor id eu. Massa tincidunt nunc pulvinar sapien et ligula ullamcorper. Cursus in hac habitasse platea dictumst quisque sagittis purus sit. Morbi quis commodo odio aenean. Accumsan in nisl nisi scelerisque eu ultrices vitae auctor. Vestibulum lorem sed risus ultricies. Ipsum dolor sit amet consectetur adipiscing elit ut. Laoreet id donec ultrices tincidunt arcu non sodales neque sodales.

Quam adipiscing vitae proin sagittis nisl. Vestibulum morbi blandit cursus risus at ultrices mi. Rutrum quisque non tellus orci ac auctor augue. Eu scelerisque felis imperdiet proin fermentum leo vel orci. In tellus integer feugiat scelerisque. Vitae suscipit tellus mauris a diam maecenas. Pulvinar sapien et ligula ullamcorper malesuada proin. Tortor posuere ac ut consequat semper viverra nam libero justo. Urna cursus eget nunc scelerisque. Varius vel pharetra vel turpis. Sem viverra aliquet eget sit amet tellus cras.