This JQuery snip doesn't work in Firefox

Question

I don't know why but the code belows doesn't work in Firefox. It goes perfect in Chrome.

// Buttons marker
$( "#second button" ).click(function() {
    $( this ).toggleClass('selected');
    $( this ).toggleClass('unselected');
    $( this ).toggleClass('btn-warning');
    $( this ).toggleClass('btn-default');
});

// Ads switcher
$( "#second button" ).click(function() {
    var category = $( this ).attr( "name");
    $( ".ad[data-category="+category+"]" ).toggle( "slow" );
});

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category=usedmotos" ).hide();
    $( ".ad[data-category=spares" ).hide();
    $( ".ad[data-category=accessories" ).hide();
});

Any suggestion? I thought that JQuery were multiplatform :/

EDIT: The code should hide some divs with the selected data-category and provide the power to show them with some buttons on the top. I'm using other JS codes in the same webpage and these ones are working, I think this is important, because it's not crashing all the Javascript. And Firebug dosen't say me nothing :(

EDIT 2: Adding my html. The code is the main of body only, I guess other isn't necessary.

 <div id="main" role="main">

            <!-- Section #1 / Cover -->
            <section id="first" class="story" data-speed="8" data-type="background" data-offSetY="-432">        
                <article>
                    <h2>Tienda</h2>
                </article>
            </section>

            <!-- Section #2 / Keycloud -->
            <section id="second" class="point heads">
                <article>
                    <div class="text">
                        <h5>Nube de palabras. Aquí van las palabras, selecciónalas. Y tal y eso y se marcarán, ya tu sabeh.</h5>
                        <h6>Básicamente es cómo funciona este sistema para ver tus peaso motos.</h6>
                    </div>
                    <div class="btn-group-vertical">
                        <div><span>CATEGOR&Iacute;AS:</span></div>
                         <button type="button" class="selected btn btn-warning" name="newmotos">Motos nuevas</button>
                         <button type="button" class="selected btn btn-warning" name="usedmotos">Motos de ocasión</button>
                         <button type="button" class="selected btn btn-warning" name="spares">Recambios</button>
                         <button type="button" class="selected btn btn-warning" name="accessories">Accesorios</button>
                    </div>

                </article>
            </section>

            <!-- Section #3 / Bulletin -->
            <section id="third" class="point heads">
                <h4 class="line-divider">ANUNCIOS</h4>
                <article>

                    <div class="ad" data-category="newmotos">
                        <a href="images/ads/ad01/1.jpg" rel="lightbox-ad01"><img src="images/ads/ad01/1.jpg" /></a>
                        <a href="images/ads/ad01/2.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/3.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/4.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/5.jpg" rel="lightbox-ad01"></a>
                        <a href="images/ads/ad01/6.jpg" rel="lightbox-ad01"></a>

                        <div>
                            <h6>Piaggio Liberty 49cc</h6>
                            <p>Se vende motor en muy buen estado, procendete de un golpe tambien todo el despiece de esta moto y el de una 49! saludos! motores desde 250 euros! </p>
                            <fieldset>
                                <span class="label label-success">250€</span>
                                <span class="label label-default">49cc</span>
                                <span class="label label-info">5.000km</span>
                                <span class="label label-warning">Blanca</span>
                            </fieldset>
                        </div>
                    </div>

                    <div class="ad" data-category="usedmotos">
                        <img src="images/ads/aprilia.jpg" />
                        <div>
                            <h6>Aprilia RS 49cc</h6>
                            <p>Vendo moto varata de serie solo pasarle la itv y yasta 550€ negociables interesados Atiendo wasap.. Color negro  </p>
                            <fieldset>
                                <span class="label label-info">550€</span>
                                <span class="label label-info">49cc</span>
                                <span class="label label-default">15.000km</span>
                                <span class="label label-default">Negra</span>
                            </fieldset>
                        </div>
                    </div>

                    <div class="ad" data-category="spares">
                        <img src="images/ads/puente.jpg" />
                        <div>
                            <h6>Puente culata Kawasaki 450 </h6>
                            <p>Vendo puentes de los arboles de lebas de culata de KAWASAKI KXF valido para KXF 450 del 2006 al 2008 </p>
                            <fieldset>
                                <span class="label label-default">150€</span>
                                <span class="label label-default">Modelo 450</span>
                                <span class="label label-default">2006</span>
                            </fieldset>
                        </div>
                    </div>

                </article>
            </section>

EDIT 3: The web it's not loading the 'ads-controller.js' the file where the code is. The code belows is how I insert the JS files.

    </div> <!-- // End of #main -->      

    <!-- Our Javascript, starting with jQuery -->
    <script src='js/libs/jquery-1.6.1.min.js'></script>
    <script src="js/libs/slimbox/slimbox2.js"></script>
    <script src="js/ads-controller.js"></script>
    <script src="js/scroller.js"></script>
    <script src="js/parallax.js"></script>

SOLVED: It was the extension 'Ad Blocker'. Because the 'ads' in the file name. I just renamed as 'controller.js' and works perfectly. Thanks everybody!

Answer 1

It was the AdBlock extension catching the ad term.

Answer 2

To make your code more DRY, chain and use CSS selectors:

// Buttons marker
$( "#second button" ).click(function() {
    $( this )
         .toggleClass('selected')
         .toggleClass('unselected')
         .toggleClass('btn-warning')
         .toggleClass('btn-defualt');
});

// Ads switcher
$( "#second button" ).click(function() {
    var category = $( this ).attr( "name");
    $( ".ad[data-category="+category+"]" ).toggle( "slow" );
});

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category='usedmotos'], .ad[data-category='spares'], .ad[data-category='accessories']" ).hide();
});

Here's a fiddle.

Answer 3

Correct you code here:

Before:

$( ".ad[data-category=usedmotos" ).hide();
$( ".ad[data-category=spares" ).hide();
$( ".ad[data-category=accessories" ).hide();

After:

$( ".ad[data-category='usedmotos']" ).hide();
$( ".ad[data-category='spares']" ).hide();
$( ".ad[data-category='accessories']" ).hide();

Also enclose your code into DOM ready as following:

// Hide all categories but newmotos when load website
$( document ).ready(function() {
    $( ".ad[data-category='usedmotos']" ).hide();
    $( ".ad[data-category='spares']" ).hide();
    $( ".ad[data-category='accessories']" ).hide();

    // Buttons marker
    $( "#second button" ).click(function() {
        $( this ).toggleClass('selected');
        $( this ).toggleClass('unselected');
        $( this ).toggleClass('btn-warning');
        $( this ).toggleClass('btn-default');
    });

    // Ads switcher
    $( "#second button" ).click(function() {
        var category = $( this ).attr( "name");
        $( ".ad[data-category="+category+"]" ).toggle( "slow" );
    });

});