Skip to content
Related Articles

Related Articles

Improve Article
How to display icon next to show/hide text on button?
  • Last Updated : 30 Jul, 2019

Here in this article, you will learn how to add icons with the show/hide text button and also you can use that icon as a button. That 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 in your webpage. In this example by 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.

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.”)




<!DOCTYPE html>
<html>
  
<head>
    <meta name="viewport" 
          content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href=
    <script>
        function showme(id) {
            var gfg = document.getElementById(id);
            var GFG = document.getElementById("geeks");
            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>
</head>
  
<body>
    <center>
        <div onclick="showme('widget');" 
             id="geeks">
            <h1 style="color:green">
              GeeksforGeeks 
            </h1>
            <i class="fa fa-fire"></i>
        </div>
        <div id="widget" 
             style="display:none;">
            <h3>
              GeeksforGeeks: 
              A Online Computer Science Portal for Geeks
            </h3>
        </div>
    </center>
</body>
  
</html>      

Output:






My Personal Notes arrow_drop_up
Recommended Articles
Page :