Discussion on CSS3 Accordions

Discussion on CSS3 Accordions

Cart 652 sales

QuanticaLabs supports this item


This author's response time can be up to 1 business day.

48 comments found.

hi, is it possible to change the Title to a circle, and have different color for each tab head?

Hello, It would require custom css coding. If you are interested in custom job please contact us via email form on our profile page: Thanks!

Hello .. I hope you have great sales at this site .. Follow me TOO :D

Much obliged

Hi, not too much of a big deal for me, but is this available for WordPress too? If it’s not that’s fine I was just wondering. Thanks :-).

Are you using “display:none” and “display:block” to get this effect or are you just adjusting the height attribute? If using display:block then it you can use css pictures in the content that only get loaded when someone opens the content… helps with page speed load. Just curious? I’d purchase if it does…

Hi. It’s based on visibility attribute.


Before I purchase can you confirm if I can have image and text together, i.e image to the left of the text?

many thanks

Hi, yes you can have images in content area. Just enclose image with text together in

To have a text wrap around the right side of that image add align=”left” attribute to image.

Hi, If I were to put in images instead of text, will the image take up the entire ‘white space’ or will there be white border around the images?

Image will take up the entire space but you can also enclose image in

to have a borders.

Is it possible to have multiple panels expanded at the same time or is only one allowed to be expanded?

Only one is allowed to by expanded at once. Our other item: has ability to expand multiple rows at once.

Hi there, is it possible to have the height set to 100% while maintaining the animation effect? I basically just want all of the content to be shown without the need of scroll bars. Any help is much appreciated!

Hello, Support for all our items is conducted through our Support Forum. Please register an account and search the forum or create a new topic, we’ll answer as soon as possible. Thank you!

Works great. 5 stars :)

Thank you sir! :)

I’m a web dummy and using easy site builders that don’t have an accordion feature – in theory, is it possible to add your script to theirs (if they allow HTML & CSS access)? Thanks

Yes it’s possible. Please also note that we offer dedicated plugin for wordpress:

Hi, I fixed it by removing from accordion.css body { margin: 50px; padding: 0px; background-color: #eeeeee;

Sorry for the post. Thanks.

The problem is solved.


I sent a PM and a new thread on support. Thanks for your assistance!

The problem is solved :)

I use it on my side, but the style.css leads to a problem (conflict) with the other CSS used by my online shop software. Unfortunately, I have failed so far to solve the problem even though I have already spent hours trying :( – Would you please help me that would be really fantastic!

Hello, Support for all our items is conducted through our Support Forum. Please register an account and search the forum or create a new topic, we’ll answer as soon as possible. Thank you!

thanks, done!

Thinking of purchasing this. Would I be able to embed shortcodes?

You need WP plugin.

If you get any ideas for this, I’d be happy to pay for it. I did get a spry accordion to do it, so there must be some way to manage it.

Hello again, I’m sorry for the delay in response to a forum. Please let’s move this conversation to the forum now. Thanks.

OK… thanks.

Nice stuff. I purchased this because I couldn’t get jquery accordion to behave as a php include. My objective is to use one block title, with content, then tie to mysql repeat region. In my first efforts, before I purchased yours, I got an ugly version to accept the mysql repeat. Example here:

So then I purchased yours and it is excellent as an include, no style challenges, but I can’t quite get the mysql to play with it. In this example, I can substitute the first db record with no issue:

However, because each block is individually named, ie, block 1, etc. when applying the repeat as in my first example, it fails. How can I change the block 1 link to block 1 to be a universal open action?

Here is the page where the repeat region is applied; you will see all of the records are in but the open action fails after the first record.

my repeat code, minus the ”<” so it will show here.

?php do { ? li class=”block” id=”block_1” a class=”header” href=”#block_1” block 1 ?php echo $row_test[‘authorname’]; ?


div class=”arrow” /div

div ?php echo $row_test[‘testimonial’]; ? /div


?php } while ($row_test = mysql_fetch_assoc($test)); ?

I tried just using href=”#” but that didn’t do it.

Any ideas, most appreciated!


It is impossible to have one universal open action. Each block needs to have an ID. You have to increment in a loop an ID and an HREF.

Hi, IE6 – 8 – Full Support (No Support for Animation) , what happens? No animation? Will the JS make sure there there is animation? Is is possible to add images and longer text content? Looks great! Thanks.

Hello. Yes it is possible to add images or any other content type. As for animations, they are not supported in IE6-8.

Hello, before buying your script I have two questions:

1) is is accessible by keyboard navigation 2)what happends when js is disabled

Thanks Flavio


1. You can navigate through tabs with tab and expand with enter. 2. It won’t work under IE6 , IE7 and IE8 with js disabled.

Great asset.

Thank you sir :)


Tell us what you think!

We'd like to ask you a few questions to help improve CodeCanyon.

Sure, take me to the survey