element only resizable when element has been clicked on jquery

Question

Currently I have multiple elements on the page and they are all resizable.

To stop all the resizable handles from being shown all the time I currently have them set to

   $("#selector").resizable({autoHide:true});   

This makes the resizable handles hidden unless the element has a mouseover event.

What I need is the resizable handles to only show when the element has been clicked on and then the handles to disappear 'onblur'

I cannot seem to find anything in the jquery for this.

Will I have to create a new resizable event for each 'onclick' event?

I am looking for a simple one liner or similar.

Can anyone help point me in the right direction?

Thanks in advance

Answer 1

You could use following snippet:

$('#selector')
    .attr('tabindex', -1)
    .css('outline', 0)
    .resizable({
    autoHide: true
}).off('mouseenter mouseleave').on({
    focus: function () {
        $(this).find('.ui-resizable-handle').show();
    },
    blur: function () {
        $(this).find('.ui-resizable-handle').hide();
    }
});