I’d like to replace the little upside-down V with a + sign to expand the drop-down and a minus sign to close the drop-down. Can’t find any tutorials or walk-throughs how to do so.
Hey there,
Many ways to do that, but maybe the simpler would be :
Delete the icon of the dropdown and create a div 16X16px.
Now in this div, create two other div, position absolute top, 100% width / 100% height. Don’t forget to set position relative to the parent (here cont icon).
Put the svgs in background of your divs
Link of the svg here
Minus : https://daks2k3a4ib2z.cloudfront.net/5850302eeaef1dae72633234/585160c4487144bd4c842ed7_minus.svg
Plus : https://daks2k3a4ib2z.cloudfront.net/5850302eeaef1dae72633234/58515adc22c25ddc586bcb89_plus.svg
Now you have to do interactions !
The idea is. On default we can see the plus, when dropdown is open we can the the minus.
In order to do that, we want the minus hidden and then display on click (if you open the dropdown with click, on hover if you open the dropdown on hover). For the plus we want it display and then hidden on click/hover.
Let’s do this with click.
First i set the minus to display none
And then i make the interaction on the dropdown (affecting minus and plus)
And now it’s working 
2 Likes
This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.