Reputation: 3313

Hide html content with jQuery or CSS

In the following html, can I hide the content starting from ( and ending at ) using CSS or jQuery. The problem I'm facing is that the ( and later code is not wrapped in any div, so I can not use CSS to find the div class and set display:none.

<span>
    <a class="test" href="#">test</a> 
    (<a href="#">?</a>) 
</span>

Upvotes: 3

Answers (6)

Blynn

Reputation: 1411

Simply add some classes to define actions.

<span>
  <a class="go" href="#">test</a> 
  (<a href="#" class="hideme">?</a>) 
</span>

$('.go').bind('click', function(e){
    $('.hideme').hide();
});

Upvotes: 0

Blazemonger

Reputation: 92893

$('span a:not(".test")').hide(); will work on your limited example.

However, it won't hide the parentheses. To do that, you'll need a specialized function to remove just the code you don't want:

$('span').html(function(i,old) {
    return old.substring(0,old.indexOf('('));
});

http://jsfiddle.net/pkMgP/

If you want to hide that instead of removing it, you'll need to wrap it all up in an HTML element and apply styles to that:

$('span').html(function(i,old) {
    var idx = old.indexOf('(');
    return old.substring(0,idx) + '<span style="display:none">' + old.substring(idx) + '</span>';
});

http://jsfiddle.net/pkMgP/1/

Upvotes: 3

Robert

Reputation: 2471

I had to reread you post a few times, but I think I see what you want. You won't be able to do what you're asking directly.

If you can edit the HTML then add a inner span surrounding the content you want to hide and hide it.

I'm thinking you're asking this question because you can't edit the HTML. In that case, what you could do is:

construct a JQuery expression to find the outer span element
Hide the span element using $(e).css('display','none')
Use javascript to copy the contents of the span, remove the stuff you want to hide
Create a new span containing the contents created in #3, add it to the DOM right before or after the span you've hidden.
You can now toggle back and forth to make the contents swap visibility.

Upvotes: 0