Hello, I am currently working on implementing an icon button that can collapse and expand text. Although I have successfully implemented the logic for collapsing/expanding, I am facing difficulties in creating the actual icon button. The theme I am required to use has provided me with the following code snippet:
<span id="toggleErrorBtn" class="ui-icon ui-icon-plus" style="background-image: url(images/ui-icons_cd0a0a_256x240.png); height: 15px; border:white; background-repeat: no-repeat; display: inline;">
<button></button>
</span>
Upon running my code, I noticed that the icon is displayed next to an empty button. However, when I attempted to hide the button using "display:none;", both the button and the icon disappeared. Is there a way to only remove the button while keeping the icon visible?
EDIT: After some experimentation, I discovered that changing the button's visibility to "hidden" resulted in two icons being displayed. By replacing the button with , I was able to achieve the desired effect. However, a new issue arose - when hovering over the icon, it was identified as text rather than a button. Ideally, I would like to have something along the lines of:
<button id="toggleErrorBtn" class="ui-icon ui-icon-plus" style="background-image: url(images/ui-icons_cd0a0a_256x240.png); height: 15px; border:white; background-repeat: no-repeat; display: inline; background-position-x: -20px;">
</button>
Unfortunately, this approach restricts my ability to change the background color. Are there any possible workarounds for this issue?