Access class with specific text content and display:none

Question

I have a large Joomla CMS Website I'm working on.

Problem: I need to hide a menu tab globally across the entire site. The menu item I need to have does not have a unique ID or class; but instead shares the same class as the other tabs I need to keep on the page. 70% of the tab I need to remove shows in 4th order so I started with the below.

.tabs:nth-of-type(4)
{
    display:none !important;
}

But! Seeing as how the rest is in different order, this wont work. The tab in question I need to remove looks like the below across the mark-up.

Update: This is what I currently have via the suggestions below but it isn't working:

$(document).ready(function() {
  $('.djaccTitle:contains("Location").css( "display: none;" )')
});
<span class="tabs">Location</span>

Is there a way to write an if statement or similar lightweight solution that can sniff out text content within the class, so if it says Location, then hide?

I would like to find a solution like this, as opposed to going through 1000 files of mark-up removing manually. Cheers for any pointers

Update: This is what I have via the current suggestions below but it isn't working!

$(document).ready(function() {
  $('.tabs:contains("Location").css( "display: none;" )')
});

i would use js to add classes/ids to every tab, then you can style away in css without issue. use positional identifiers; digging into content via :contains will be slow and buggy because parents ":contain" the same text... — dandavis, Sep 30 '14 at 22:19

Andacious · Answer 1 · 2014-10-01T13:47:19.093

2

I do not believe what you are asking for exists with pure CSS at this time.

What I would do is use jQuery's :contains() selector:

$('span.tabs:contains("Location")')

or even better:

$('#idOfTabsContainer span.tabs:contains("Location")')

And of course, don't forget to put this in a document.ready to ensure that your DOM element has been loaded successfully:

$(document).ready(function() {
    $('#idOfTabsContainer span.tabs:contains("Location")')
});

edited Oct 01 '14 at 13:47

answered Sep 30 '14 at 22:19

Andacious

1,162
10
17

For some reason this isn't working for me; should a certain jQuery be used / not used? – Dr Upvote Oct 01 '14 at 03:11
You will need to put this in a document.ready callback (see edit) – Andacious Oct 01 '14 at 13:47

score 1 · Answer 2 · edited May 23 '17 at 11:49

1

There used to be a :contains selector that they were going to add to CSS.

But alas, you may have to resort to some JS, as addressed already here

jQuery's got your back though:

$('.tabs:contains("Location")')

edited May 23 '17 at 11:49

Community

1
1

answered Sep 30 '14 at 22:13

Dave Lunny

750
8
21

score 1 · Accepted Answer · answered Oct 01 '14 at 05:08

1

Jquery :contains() Selector should work. I think you have an error in .css() function syntax.

Please try with:

jQuery(document).ready(function(){
    $( '.tabs:contains("Location")' ).css( 'display', 'none' );
});

Hope this helps

answered Oct 01 '14 at 05:08

emmanuel

9,607
10
25
38

score -1 · Answer 4 · answered Oct 01 '14 at 07:42

Problem: I need to hide a menu tab globally across the entire site.

Solution 1: Disable the menu item. Boom, it is gone from your menus, site wide.

Solution 2: Hide the menu item with css by adding a unique class to the menu item itself and then hiding it with css.

enter image description here

.hide-me-with-css {display: none;}

Access class with specific text content and display:none

4 Answers4