insidelabdev supports this item


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

20 comments found.

Hey, just purchased. Is there anyway of being able to download just the essential files. I’m not quite sure what would make this zip file 368 MB in size and for some reason the connection is slow. Love the demos on your page, just wasn’t expecting a mammoth file! Cheers :-)

Hi unfortunally you need to download that package because inside all are essential files because there you have a lot of examples with three theme options and a lot of demos for you play with

Also if you need some help with any doubt you have just let me know :)

Hey, I managed to find another internet connection and download the entire thing.

Wow, you’re very generous with the files, that’s a lot of work you’ve put into. Very nice clean work, I’m looking forward to using them.

It’s over 600 MB when the zip file is decompressed but I’m glad to know it was the demo pixs and fonts that took up all the room and not the css files :-)

Can I suggest for future updates that perhaps lower res flat images are used for the demos to save a heap of space and bandwidth. I don’t mean to sound ungrateful because what you are offering is already a fantastic bargain and the work is beautiful.

I hope you will expand on adapting some of your work into Wordpress plugins, you would do rather well.

Thank you, and all the best with your creative venture!

Hey thank you for your words and feedback for sure i will take in consideration some of your ideas

and let me know if i can help you with something doubt you may have Cheers :)

Hi. Maybe I am just missing it, but is there a accordion-inside horizontal layout? Thanks!

yes you have inside pack horizonal layout with various examples

Just purchased. 5 stars all around. Well coded and very clean! One of the best jobs I have seen on Code Canyon. I only have one question and I am not sure if it is even possible without using jQuery. Is there anyway to be able to click the accordion after it is open to close it again? It appears that when you open up one the other will close. Just curious if you can close them all after they are open. Please let me know. Thank you.

Hi thank for your rating and feedback is really important also yes is possible just go to accordion toggle at examples folder and try that samples
also just let me know if you have any doubt :)

Perfect! I completely overlooked that folder. I apologize. Looking forward to what else you guys produce. Novices to professional agencies will really like the way your stuff is coded. Very lean and clean. Thanks a lot!

Hi thanks,
Just let me know if you have any doubt :)

Hey just a quick one – How do I use my own icons instead? I have my own .png files that I want to use. What do you change in the html?

can you send me your script for i add an example for you

It’s the stock script provided in your product..

“ <input type=”radio” id=”accordion-one” name=”accordion” class=”input”> <label for=”accordion-one” class=”label”>TITLE</label>



I need to replace the i class with a local .png file instead of using the icon pack. How do I do this?

Hello good morning,

Replace i tag by img tag like example below this example is for change left icon in blue bar and icon in section

<input type="radio" id="accordion-one" name="accordion" checked="checked" class="input">
                    <label for="accordion-one" class="label"><img src="images/your-image.png" />Welcome</label>
                    <div class="section">
                        <div class="section-content">
                            <div class="grid-container">
                                <div class="column twelve">
                                    <h4><img src="images/your-image.png" />Welcome</h4>
                                    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat nonummy nibh euismod laoreet dolore.Lorem ipsum dolor sit amet, consectetuer adipiscing elit.Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat nonummy nibh euismod laoreet dolore.</p>                                         

in settings.css add this code for styling images in label left side

.accordion .accordion-wrapper .label img{

in settings.css add this code for styling images in section

.accordion .accordion-wrapper .section .section-content img{

for replace right side icon

.accordion .accordion-wrapper#right-arrow .label:after {

    .accordion .accordion-wrapper#right-arrow .input:checked + .label:after {

might be a silly question, but how do i replace the images in slider ? when i copy my own there they come out smaller even though they are same size ?

Hi, thank you for your purchase, can you share link to your url for i check please

Great job! nice work

Hi, thank you for your words :)

hi, what is changed in ttoday`s update? unfortunately no entry in the version – history… thx in advance


Hi just update right now


Is the implentation in a WordPress site easy?

Is how to do it included in the documentation?

Hi thanks for your interest, Im preparing an wordpress plugin for this so in december i will launch it :)

Also and since this is only an html version you need to include the html in your post /page and css in header.php of your theme with your editor

so if you need it now i can also help you with all pleasure so let me know

Sorry, i didn’t mark “email me when reply”. I repeat the question.

Is there any easy way to implement in a live WordPress site?

is that information about how to do it included in the documentation?

Thank you. Including html in any page even the css in the header shouldn’t be a problem for me but due to I did never work with a framework I’m not sure how it works.

I mean, how do I generate the html? inside or outside WordPress? Because If it is generated outside WordPres, i.e, from any Internet browser, I guess you’ll have documented the procedure. In the other hand, if I have to generate the html code inside WordPress I don’t know how to do it If I don’t have the plugin

Hi inside this pack you have a lot of examples, that examples have a lot of options and designs for you choose if you check demo of this product you can see how it works so when you check inside pack you can see all examples for you choose from also you only choose one from them all for you work with

So after you choose your example you can copy html from that example and paste it in your post/page in wp in your desired location, and also copy links css files in that example and paste it in your header,php inside your editor in wp dashboard and you are ready to see accordion in your desired location

You dont need to generate any html or css code or anything is more easy because you have that folders ready to go live you have that designs made for you, only need to copy paste html and css files and thats it

Also im here to help you in support with 6 months included in any of my products

Just purchased and working in a 3 minutes. Awesome!. I already rated with 5 stars

Now it is time to get confidence with it

About “Accordion with Submenu”. In the example there are 3 levels.


I need a fourth level and may be 5 further. Is that possible?. Is in the documentation or please let me know how to do it?

or send me your email for i send you a complete example with 5 sub items :)

OK. Thanks

what are theme you are working?

Dear sir

Please tell me if your pricing tables and accordion and other products are WordPress Plugins. Can they be installed using the WordPress “Upload Plugins Section?”

Thank you

Hi, soon i will have wp plugins for that products but for now only html and css

Hi, please take a look at shortcodes framework at my portfolio with wp plugin

Hi support This plugin support multiplate background color for title tabs?

Hi, good morning,

if you mean add multiple background colors for each label yes we can help you doing that

Hello Support, Just bought the product. I have a small question. In the HTML code “id=”accordion-widget-right-arrow” is repeated several times. I think the Id should be unique in the HMTL code. Please comment on this. Thank you in advance.

Hi,good morning, no need to be unique since this is about right arrow on label please study it at css code, right arrow only have two states, open and close so there is in settings.css


zelada Purchased

Hi, I’m really interested in buying your Accordion Framework, as I want to update my website ( which is similar but all mixed up and using js getElementById. I like the fact that your accordion closes when you open a new line, but it would be necessary for me to input all that information in each line is it possible to create cells? and I’d also like to know if it’s possible to include picts and videos in an open accordion. Thanks in advance Z

Hi, thanks for your interest inside accordion you can add what you want since tables, images, videos, text, etc, also is important to know that inside this pack you have more than 40 examples that you can use

Also you can pen one label at a time or multiple labels at a time I can also help you add your content inside accordion section if you have doubts to doing that

So let me know if i can help :)


zelada Purchased

Thanks! Just bought it. I’ll let you know how it goes and if I need any help :)

Ok just mail me Thanks!! :)

Implemented the accordion framwork with succes. One question. When you click on the accordion bar is opens and shows the items. When you click on the same bar the item does not close but stays open. If you click on another bar the previous items closes. Would it be possible if you click on the same bar for the second time the item is closing. Thank you for your support again.

Hi, you can go to html index.html file and change input type=”radio” by input type=”checkbox”

Do not have an option to close the accordion by clicking again on the open panel? Always remain an open panel after clicking any of them. I wanted to be able to click on one of them again and close it, similar to this link:

hi, you need to check accordion toggle for that Thanks for purchase


ZKM128 Purchased

Dear Sir/Madam,

I have 2 questions regarding the ‘Accordion Framework’ that I have purchased from the

Question 1: When I put a long html content (more than 2000px long) inside one of the accordion widget section, the content doesn’t fit. It gets cut out at the bottom, I mean the accordion section doesn’t show all of the section contents and show only about max 1000px long. How can I fix this problem?

Question 2: Is it possible to change the color of the accordion widget header (where the accordion section heading text is located)?

Hi, Good morning,

1- you can change the max-height here for whatever you need in accordion-widget-settings

.accordion-widget .accordion-widget-wrapper .accordion-widget-input:checked ~ .accordion-widget-section { 
    max-height:1000px; // CHANGE HERE TO HEIGHT YOU NEED
    -webkit-transition:all 0.8s ease-in-out;
       -moz-transition:all 0.8s ease-in-out;
            transition:all 0.8s ease-in-out;

2- Yes you can chnage the color or background at accordion-widget-theme.css depending of color class you add in html just check docs for that in “HTML STRUCTURE”



ZKM128 Purchased

Dear author,

Is it possible to reduce the internal margin of the accordion section and the external margin of the accordion control? I like the default margin size of the accordion when viewed on the normal wide desktop monitor but when users (especially female phablet fans) hold their phone in portrait direction and look at the accordion control through their low resolution screen, the margin area takes about 20% of the narrow phone screen width so I would like to proportionally reduce the internal and external margin sizes.

Hi, good morning,

Yes of course you can reduce the space

1- Margin of accordion in responsive view outside

.accordion-widget-container {
    max-width:1200px; // ADD HERE 100% IF YOU NEED ACCORDION WIDE    
    margin:50px auto;
    padding:30px;  // REDUCE HERE YOUR PADDING 

2- For accordion section space you can change here

.accordion-widget .accordion-widget-wrapper .accordion-widget-section .accordion-widget-section-content{
    padding:30px; // REDUCE HERE YOUR PADDING 

ZKM128 Purchased

Dear Author, Forgot to ask one more thing, when I test/view the accordion in my local testing machine’s browser, the arrow icon on the right side inside the section header (which points downward and upward when users open/close accordion section) appears and works fine but when I uploaded the page to the live web server, the arrow icon disappears. I guess it’s because of the arrow icon not being able to find the icomoon-ultimate.ttf font file or the font file has been blocked or something, Could you please explain how to display/enable the arrow icon when uploaded to the web server? Is https blocking it? Thank you,

Hi, send me your url for i check script in action

Hi, it doesn’t look like your documentation works – I’m click on the side links and nothing happens. I’m trying to add another accordion but it doesn’t work properly when clicked – it just opens the one I copied.

Hi, good morning,

Can you show me what are the example you are working Also what are browser you are checking docs, Mac or windows