How to display icon next to show/hide text on button?

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

filter_none

edit
close

play_arrow

link
brightness_4
code

<!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>      

chevron_right


Output:





My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.