changing the functionality of the toggle button in mobile view

Question

I am turning the PSD design to responsive template for online store. Here is link. I came across to the problem. There is a confuguration menu(config panel) on the left sife for choosing and filtering the desired good.When clicking on config panel toggle or on any items of config panel , config panel opens or closes. You can see the action visiting the link. But on mobile version, config panel is hiddedn by default. Only clicking the appropriate button reveals it. I embodied this by adding '.show' class to parent config panel. After that, a trigger event opens the full configuration panel THe problem is, It does does not disappear when I press again on the toggle button of config panel. On tablet and desktop sizes this toggle button(x icon) hides the main part of configuration panel. But in mobile version it must act as close button which fully closes the configuration panel. I just need the way which realizes the removing added before '.show' class only on mobile version.Is it possible to make this functionality, in general? Thanks for any help! script that opens config panel from mobile version.

Answer 1

I think your $('.config-toggle').on('click') is just missing a $('.wrapper').find('.config').removeClass('show');

BTW, great design!!!