Pixelworkshop supports this item


This author's response time can be up to 2 business days.

80 comments found.

Hi there,

I am still very enthhusiastic about your script and I still use it.

But I would like to see if you would add a link to the fontawesome CDN because your version of Fontawesome is a bit out of date.

There is a new version and they use different classes than the old version

If you use the new version, people don’t have to upload tall the font files and an extra css file to their servers.

Would make it more convenient :)

Best regards,

Rob van Linda

Hello and thanks for your feedback. I wouldn’t rely on a CDN because it’s harder to maintain when I don’t have control on the files. If for example they do a big update and if I don’t have time to modify the panel, then it can be broken in the meantime. I’d rather add a section in the documentation to explain how to switch from the default files provided to the newest version (CDN or local).

I work with hthis method since years now and it works perfectly.

There are icons added which are nice and/or usefull and I would miss them when I would use Fontawesome local.

But it is nice that you name it in the docu. Maybe it would be nice to have two css files. One for the “local” font version and one for the CDN.

So people will have more comfort when choosing which method they will use :)

The classes changed quite a bit from, for example, “icon-facebook” to “fa fa-facebook”

Thank you for reading and commenting :)

Regards from Berlin,

Rob van Linda

Good, I’ll have a look once back from holidays, suggestions are always welcome :)

hi, is there a way you can use font-awesome “fa-” instead of “icon-”. Currently you are using the old version, which is 3.2.1. The new version is 4.1. This is because i can’t find the class=”pocp_button pocp_button_left” in your html when i check in Firebug. Let me know before I purchase. That’s the main function of the project i need this for

Hi, it’s defintely possible to update the font awesome icons, I’ll update the panel when I’ll have some time. The button is generated via javascript, and the icon classes should be modified in the script, that’s probably why you can’t check it with Firebug.


Just purchased and am very happy. Wonder if you could give a little guidance ? I’m looking to get BOTH a left and right hand side carousel on a page – any issues with doing this ? Believe may be a id conflict for the nav buttons etc ?

Thanks in advance,


Hello, unfortunately that’s not something possible at this moment, this is not a scenario that I considered when I created the panel and there will be conflicts for sure. I’m not sure to know how many changes it would involve in the script but the CSS shouldn’t need to be modified.

Nice Script. Couple of questions:

1) It is possible to change the + symbol to show text instead e.g: Open / Close

2) Would like the button that opens the content to be located at the bottom right of the page – keeping it responsive at the same time. Is this possible?

Many Thanks.

Hello and thanks for using my work !

1) Yes, that’s an icon from the included Font awesome collection. It’s inserted via javascript and classes are switched to show either the plus or the minus sign. You can quickly change them by searching and replacing all occurrencies of icon-plus and icon-minus in the script (pulloutpanel.js).

2) It’s in the CSS from the line 149, you can search for the class .pocp_button and change the position. The btn_active class is assigned when the panel is opened so make sure that you define properly the bottom / right values according to your needs for both states (when the panel is closed and when it’s opened).

Hello I trying to add a tool tip to the plus icon when it hovered over Is there a way of doing this built in or do I need to add the feature. Thank you amj

Hi, this is not a built-in option, you’ll have to add it manually.

Thank you this ability would enhance an already quality product.

Hey There! I’m interested in your Pull-Out-Container-Panel, but have two basic questions: 1. How do you install it on a WordPress site 2. I noticed based on your video that the POCP sits inside the “Body” of the page, so when you open it – it hides part of the text. I would like to know if it can reside outside of the Body or Box container.

Thanks for your help. Gary

Hello, I don’t have instructions concerning Wordpress as I’m not experienced with this CMS and this is not a plugin. And concerning your second question, I’m not sure to understand but this panel is fixed so it remains outside of the page flow – it doesn’t interact with the other elements. Changing this behavior would require quite a few changes I guess.

Hi, can i pull out side menu programatically ? i use i frame on my site, when user click inside in the content of the iframe, side menu not automatically collapse/hide. Can you give example? Thx

I think I don’t understand what you mean by “programatically”...

thanks for your fast response. I have a button link inside the panel, when i click that button, i want the panel closed immediatly, without waiting user to click the minus button, or click outside the panel. So i’ll make a function to handle the link button. what function should i call to close the panel? could you give me example? Thank You

Hello, actually the function is used by the +/- button, and it does not only toggles the panel, it also handles this button (position and +/- sign). So there would be 2 ways : either customize the script in order to reuse functions or add some separate code (it could be easier but it depends on your knowledge of JS). This is a bit too advanced to be explained in details here.


great script

can I open and close the panel via javascript? If so PLEASE send me the command.

Hello and thanks ! Actually the panel is opened and closed via javascript. Functions can be reused or customized but the open/close code is there already.

HI Is it possible to have the panel always open on desktop and hidden on small screens ?, i would like to use it to hide an accordeon menu on smartphones Thanks

Hello, that’s not an option provided for this panel but I guess that it could be done by customizing the script in some way.

I need to be able to dynamically add items to a toggle list (using jquery $append()). I CAN add the item, but clicking on it doesn’t expand it. I see there’s a pocPanelToggleInit() function in the code that I’m guessing I need to call to reset all the toggles, but I can’t call it from outside the plugin. Any ideas?

Also, I need to programmatically close the panel (after a form inside the panel is submitted). How is that done?

Hi, I also need to be able to have dynamic content in the list, using angular in my case, but any pointers about adding/removing content to a list would be much appreciated! Thanks :)

Hi, great script! you’ve caught my attention! I have one question, I will like to use this script as the main menu on my site and will like to know if the animation when activated can change to sliding out rather than the animation you have on the video? Thanks!

Hello, animations can be customized in the CSS.

Hi, Can the font-awesome +or- be changed to a png, etc.? J

Hi, yes, images can be used for sure.


the question has been asked before may be but the plugin allows it to create multiple panel that can be assigned to the page you want ?


Hello, this is a static HTML/CSS element, theorically anything can be achieved but this is not coded for a platform like wordpress or any sort of CMS. So if you’re looking for a “plugin”, this is probably not the type of product you need.

Great add-on.

Wish this supported Font Awesome 4.x out of the box though. I had to manually tweak it to replace icon- with fa fa-

Also, wish this had an easy option for disabling this on smartphone-sized screens.

But, I gave this add-on 5 stars. Great work!

Thank you, font awesome can be upgraded without any problem :)


Simbad Purchased

Hello, how is it possible to make one of the toggles opened on the first sight? So, when somebody open panel, that particular toggle would be already open. Thank you very much.

Hello, I replied by email, thanks.

Hello! This looks pretty awesome, but I have a couple of questions first before purchasing. Can I put form elements in the box that will change the look of my website when they choose certain options? I was going to have jquery tied to buttons and different form elements that would affect the page the user is on. It’s basically allowing them to customize the site they’re on to look how they want it to while browsing it.

Hello, well that’s for sure possible but it’s not part of the panel itself, it’s just a container where you can put almost any type of HTML element and attach custom events if you need too.


It seems like really nice plugin! Does it have a method for destroying / disabling the sliding behaviour so the sidebar is static and can be positioned anywhere on the page?

I’m looking forward to hear from you.

Hi, there’s an option to make the panel visible when the page loads. Then you can also hide the + button but it’s only about adding a

in the CSS.

Thank you for your reply! I already implemented it with custom JS :)


Hi there! I bought this item some time ago, never had free time to try it and never asked you a question. I build it into my website today.

It works perfect so far: http://www.smartestfinance.com/boersennachrichten/

The only problem: it’s lying on my logo on the right side and on the left side on the mobile menu / search field. I just need the ”+”-icon about 25 px down.

Where in the pulloutpanel.css-file can it be set? (line and how)

Thanks in advance!

Kindest regards,all the best, have a great time,


Hello, the + button can be changed in the CSS where you have styling for .pocp_button_left

Thanks, I just put it on the right side now.

Kindest regards, smartestfinance