Interactive behavor of Content Area Dropdown

[ghnassia]

Hello,
I have a Content Area Dropdown (using PRO) with an icon and a secondary icon setted.

Here is what says the support post Pro - Content Area Dropdown Element:

Secondary Icon - The icon visibl, used when the button is interacted with (on hover etc). Click Select Icon to open the Icon picker.

When I inspect the element on the page, I can see 2 different classes for the interaction : .x-interactive (while hover) and .x-active (after click, while dropdown is shown).

Is there a way to show the secondary icon only when .x-active is active and keep the primary icon while only x-interactive is active (that means show the secondary icon only when the dropdown is shown)?

I have tried to use global js to remove the class .x-interactive, without success (x-interactive is still there on hover) :

$('selector').hover(function(){$(this).removeClass('x-interactive');});

Thanks.

[nabeel]

Hi There,

Thanks for writing in! To assist you with this issue, we’ll first need you to provide us with your URL. This is to ensure that we can provide you with a tailored answer to your situation. Once you have provided us with your URL, we will be happy to assist you with everything.

Thank you.

[ghnassia]

On the header, I have a search button (which is a content area dropdown).
I assigned a cross icon as secondary icon.
The idea is to show a cross while the search dropdown is active so we understand that we have to click there to close the dropdown.

[christopher]

Hi there,

Thank you for giving the URL of the website.

Correct me if I am wrong, I checked your website and have exactly the behavior which you described. Have you managed to achieve that?

I recorded a screencast of the what I see in the website which I will give th elink in the Secure Note.

[ghnassia]

Thanks Christopher
It’s not exactly what I want.
The idea is that the icon should show what the user will get by clicking it.
So the magnifier means : “if you click me, search dropdown appears”.
And the cross means : “if you click me, search dropdown disappears”.
It’s OK in most cases except while the mouse is over the button when the dropdown is not active (in this case there’s a cross, but I would like the magnifier to be there until clicking).
If you read my first post, this is due to the .x-interactive class.
Thanks,

[friech]

Hi There,

Thank you for the clarification, we can hide the secondary icon and show the primary icon instead when the x-interactive class is present.

a.x-interactive .x-graphic-primary:not(:only-child) {
	opacity: 1;
}

a.x-interactive .x-graphic-secondary {
	opacity: 0;
}

Hope it helps,
Cheers!

[ghnassia]

Works perfectly,
Thanks !

[paul.r]

You’re welcome!