Hide text without html tag parent being hide jQuery

Question

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
});

You can't, without a tag, there is nothing to 'apply' the hide style/css to. — Dellirium
– Dellirium, Commented Sep 13, 2017 at 7:54
I guess you could use a data attribute on the <a> tag to store the original text, and a data attribute to store the status of the text, either visible or hidden. Then on click you either remove the text or add it. I would advise against it and just add a <span> around the text. — Gavin Bruce
– Gavin Bruce, Commented Sep 13, 2017 at 8:04

OptimusCrime · Accepted Answer · 2017-09-13 08:04:32Z

1

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.

edited Sep 13, 2017 at 8:04

answered Sep 13, 2017 at 7:57

OptimusCrime

14.9k13 gold badges63 silver badges98 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Shell Suite Over a year ago

yes, i want to be able move out the text and move in the text again, can you provide the working code?

OptimusCrime Over a year ago

@ShellSuite Provided a minimal example.

Dejan.S Over a year ago

@ShellSuite OptimusCrime (cool name) is giving you options. If you can live with wrapping the text then it's not that hard to do. Just let us know if you can deal with a wrapper or not. There is one more option to hide and show text without a wrapper though, I still don't get what text you want to hide?

Fariz Aliyev · Accepted Answer · 2017-09-13 07:59:30Z

0

$('#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
});

answered Sep 13, 2017 at 7:59

Fariz Aliyev

1193 bronze badges

Collectives™ on Stack Overflow

Hide text without html tag parent being hide jQuery

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related