How to hide syntaxhighlighter brush on page load?

Question

On my site I supply code samples for both C# and Visual Basic in articles. By default, I want only the C# brushes to display on page load (vb samples would be set display: none;

In the past I've accomplished this by waiting for all the content to load and then hiding the VB samples:

$(document).ready(function() {
    setTimeout(function() {
        $(".vb").hide();
    }, 500);
});

But this is sketchy at best, so it occurred to me: why not just set a default style for those brushes so that they're hidden in the stylsheet?

Unfortunately, I've looked and I can't find any brush specific style rules in syntaxhighlighter that I can play around with...

Can anyone suggest a solution here because I'm very confused...

Here are two pages on my site. The .hide() works in the 1st, but not in the 2nd..

Forms Authentication in ASP.NET
Basic CRUD in LINQ To SQL

Answer 1

It should work just using it as a css rule

.vb { display:none }

On a side note, if none of the article content is changing and you are only flipping the code, then it might be better UX design to make each of the code blocks a tabbed interface. Yes it will mean duplicating the buttons but it will make a lot more sense to the end user and will be more immediately available. You will notice that most coding sites will do this if they show examples for more than one language.

And another note: most users don't like it when you change the scroll bars of the window frame. Most people find it similar to marquee and blink and if you notice your scroll bar disappears when you hover/drag it which makes it extra frustrating.