<ul> <li> Hide/show inner text only not <i> icon tag

Question

In jQuery I need to hide/show inner text of anchor tag. Here is html :

<div id="side_bar">
  <ul>
    <li><a href="#"><i class="fa  fa-fw fa-cog"></i>General Settings</a></li>
    <li><a href="#"><i class="fa  fa-fw fa-cog"></i>Other Settings</a></li>
    <li><a href="#"><i class="fa  fa-fw fa-user"></i>User</a></li>
  </ul>
</div>

on a button click I need to hide/show only inner text General Settings,Settings,User.

I tried this :

$.each($('#side_bar').find('ul').find('li'), function (key, value) {
  $(this).find('a').contents().get(0).nodeValue.hide();
}); 

but it's not working.

got this error in console ::

TypeError: $(...).find(...).contents(...).get(...).nodeValue is null
    $(this).find('a').contents().get(0).nodeValue.hide();

I need result to only hide show <a> tag's inner text, not the icon. I try to make collapse sidebar menu.

NOTE :: I must not need to add <span> in to menu.

Answer 1

Here's a solution strictly based on your existing description.

First there is a button, with a click event handler, since you say you want this to happen on a button click. Second, you only want to hide the "inner text". I take this to mean you don't want to hide the <i> tag. The easiest way is to put the text into a span with a class, then it's straightforward to locate - all the find stuff is completely unnecessary, you can use a simple selector:

<div id="side_bar">
  <ul>
        <li><a href="#"><i class="fa  fa-fw fa-cog"></i><span class="menuText">General Settings</span></a></li>
        <li><a href="#"><i class="fa  fa-fw fa-cog"></i><span class="menuText">Other Settings</span></a></li>
        <li><a href="#"><i class="fa  fa-fw fa-user"></i><span class="menuText">User</span></a></li>
  </ul>
</div>
<button id="myButton" type="button">Click to hide</button>

$(function() {
  $("#myButton").click(function() {
    $("#side_bar li a .menuText").hide();
  });
});

OR, as per your last update, you're certain you can't/won't add a <span> into the markup, you can just hide the text. I've also included a feature to save and restore the text later when the button is clicked, by keeping the text in a data- attribute of the anchor:

<div id="side_bar">
  <ul>
        <li><a href="#"><i class="fa  fa-fw fa-cog"></i>General Settings</a></li>
        <li><a href="#"><i class="fa  fa-fw fa-cog"></i>Other Settings</a></li>
        <li><a href="#"><i class="fa  fa-fw fa-user"></i>User</a></li>
  </ul>
</div>
<button id="myButton" type="button">Click to hide</button>

$(function() {
  $("#myButton").click(function() {
    $("#side_bar li a").each(function() {
        var el = $(this);
        if (el.text() != '') {
            el.data('originalText', el.text());
            el.text('');
        }
        else {
            el.text(el.data('originalText'));
        }
    });
  });
});

Working fiddle here: http://jsfiddle.net/xcxv682h/1/