Close Content Area Off Canvas With Filter Click

[oitproductions]

Is it possible to close a Content Area Off-Canvas by click on a filter for a portfolio? Can’t work out how to do it.

Any help would be appreciated.

[lely]

Hi @oitproductions,

It is possible with custom JS.
You need to use the click function of jquery. Here’s the guide: https://api.jquery.com/click/

I am not sure with your setup but we can invoke a close button click using correct ID

 

jQuery ( function($) {
  $('#custom-close').click(function(){
     $('#my-off-canvas-off-canvas button').click();
    
  });
 
  } );

custom-close is the ID of the button the will close the off canvas
my-off-canvas is the ID of the element off canvas.

The idea is the same with what you want to achieve. You just need to change the ID.
Look at this sample: https://screencast-o-matic.com/watch/cqlbfJvig4

Please note this is just a guide and customization further from here is beyond the scope of our support. Thank you understanding.

[ruenel]

Hello @oitproductions,

I am not sure which portfolio shortcode you are referring to. The easiet way is to wrap your shortcode with an element ID and then use it in the code given by @Lely. For example:

<div id="my-portfolio">
  [the portfolio shortcode here]
</div>

And you can have this JS code:

jQuery ( function($) {
  $('#my-portfolio').click(function(){
    $('#my-off-canvas-off-canvas button').click();
  });
});

Hope this helps. Please let us know how it goes.

[christian]

Hey @oitproductions,

You don’t have to wrap the Portfolio Filter with HTML as the links within the filter has a class and that is x-portfolio-filter. You should use that to trigger a click to the Off Canvas Close Button which has a class of x-off-canvas-close.

(function($){
    $('.x-portfolio-filter').on('click touchend', function() {
        $('.x-off-canvas-close').click();
    });
})(jQuery);

Provided you have copied the code completely and there’s no other Javascript conflicting with that code, it would surely work as you’ll see in the video below.

Hope that helps.