CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Shell Suite
Shell Suite

Reputation: 690

Hide text without html tag parent being hide jQuery

I want to hide a text inside the html tag, the problem inside this html tag the text not wrapped inside any tag, so it makes me wonder how to hide the text. here's my code:

<ul class="nav items"> 
   <li class="nav item ">
      <strong>
        <i class="ion-speedometer"></i> Dashboard
      </strong>
   </li>
   <li class="nav item"><a href="#"><i class="ion-model-s"> </i>Delivery Order History</a></li>
   <li class="nav item vendor-guide  ">
      <a href="#"><i class="ion-help"> </i>Help Guide</a>
   </li>
   <li class="nav item" id="collapse-list">
      <div class="seperator">
         <span class="outer-line"></span>
         <span class="fa fa-lg fa-angle-double-left" id="arrow-collapse" aria-hidden="true" style="margin:10px 0"></span>
         <span class="fa fa-lg fa-angle-double-right" id="arrow-show" aria-hidden="true" style="margin:10px 0;display:none;"></span>
         <span class="outer-line"></span>
      </div>
   </li>
</ul>

as you can see from above code beneath li html tag there is a text html tag container which is strong or a, beside text there is an icon. here's my jQuery code:

$('#arrow-collapse').click(function() {
    //hide the text
 });
$('#arrow-show').click(function() {
    //show the text
});

Upvotes: 2

Views: 1143

Answers (2)

OptimusCrime
OptimusCrime

Reputation: 14863

The display and visibility attributes targets the content/children within that HTML tag. There is no way to hide just the text inside a tag, and not the other children as well. You could attempt to "hide" the text by doing text-indent: -999999px; to move the text outside what is visible, and then adjust the position for the other children tags.

Your other option here is to wrap the text in a tag, for example span and hide that.

Minimal example*:

div {
    text-indent: -9999px;
}
div strong,
div i {
  display: block;
  text-indent: 9999px;
}
<div>
Outside text
<strong>strong text</strong>
<i>Itallic text</i>
</div>

Note that this approach will not work unless you have display: block; on the strong and i tags, as these are inline by default. text-indent does not work on inline elements.

Upvotes: 1

Fariz Aliyev
Fariz Aliyev

Reputation: 119

$('#arrow-collapse').click(function() {
   $('#arrow-collapse').text("");
});
$('#arrow-show').click(function() {
   $('#arrow-show').text("Text");
});

or 

<span class="fa fa-lg fa-angle-double-left" id="arrow-collapse" aria-hidden="true" style="margin:10px 0">
   <span class="collapse-text">Collapse Text</span>
</span>
<span class="fa fa-lg fa-angle-double-right" id="arrow-show" aria-hidden="true" style="margin:10px 0;display:none;">
   <span class="show-text">Show Text</span>
</span>

Then

$('#arrow-collapse').click(function() {
   $('.collapse-text').show(); //for example
});
$('#arrow-show').click(function() {
   $('.show-text').show(); //for example
});

Upvotes: 0

Related Questions