In this article, we will learn how to add icons with the show/hide text button and also you can use that icon as a button. It will be done here by using JavaScript. In this example, with the help of JavaScript, you can easily toggle between show and hide. Add any icons beside the button or you can use icons as a button also. Here you just need to link with the awesome font’s icons that will bring the icons to your webpage. In this example clicking the text beside the fire icon trigger the show/hide function.
Required things: A <div> that will show and hide your element as you set, a text that will work as a button, and the JavaScript to do the job. The below code will illustrate the approach more clearly.
Example: (No space is going to be taken up by the element when the property of the display is set to “none.”)
html
<!DOCTYPE html><html lang="en"><head> <title> How to display icon next to show/hide text on button? </title> <link rel="stylesheet" href=</head><body> <div onclick="showme('widget');" id="neveropen"> <h1 style="color:green"> neveropen </h1> <i class="fa fa-fire"></i> </div> <div id="widget" style="display:none;"> <h3> neveropen: A Online Computer Science Portal for Geeks </h3> </div> <script> function showme(id) { let gfg = document.getElementById(id); let GFG = document.getElementById("neveropen"); if (gfg.style.display == 'block') { gfg.style.display = 'none'; GFG.innerHTML = 'GFG <i class="fa fa-fire"></i>'; } else { gfg.style.display = 'block'; GFG.innerHTML = 'Tag-line <i class="fa fa-fire"></i>'; } } </script></body></html> |
Output:
How to display icon next to show/hide text on button?
