Hide a specific H2 id using javascript or CSS

Question

We're looking into Zendesk for our support site but it's not very customizable. I'm trying to remove specific text from the page using their widgets function (which can be created in javascript or css).

I'm trying to hide the following h2 tag while displaying the page:

<h2 id="search_box">Knowledge Base &amp; Forums</h2>

I've tried the following CSS:

.search_box {
    display: none;
}

But it doesn't seem to work. I'm not great with either CSS or javascript and I also don't know exactly when these widgets run, but I assume I'm doing something wrong in terms of accessing the element on the page.

I've been able to hide the text using the following combination of Javascript and CSS codes, but it doesn't do what I need because it will hide any part of the page that has the text in it:

Javascript:

$j('h2:contains(Knowledge Base & Forums)').addClass('forumtitle');

CSS:

.forumtitle {
    display: none;
}

Thanks for any help!

Answer 1

#search_box {
    display: none;
}

. is for classes, # is for ids

Answer 2

Try using in your CSS:

#search_box {
    display: none;
}

Answer 3

Your CSS is off - to hide an id `search_box your CSS would be

#search_box {
    display: none;
}

Note the # for id - . is for classes.

Answer 4

If you wish to use jQuery you can try this...

$(document).ready(function(){
    $("h2").each(function(){
        if(trim($(this).html()) == "Knowledge Base & Forums") {
            $(this).hide();
        }
    });
});

Answer 5

Try document.getElementByID("search_box").style.visibility = 'hidden'; in Javascript