CODEWITHSUNDEEP
javascriptjqueryhtmltwitter-bootstrap
LuigiAlver
LuigiAlver

Reputation: 201

JQuery show() not working after click()

I have the next script in a webpage to show/hide the content depending on the content the user wants to see. At the beginning all the divs show but I want the user to filter by language.

$(document).ready(function() {

    $('#all').click(function() {
        $(".spanish").show();
        $('.english').show();
        $('.french').show();
    });

    $('#english').click(function() {
        $('#english').addClass("current");
        $('.spanish').hide();
        $('.english').show();
        $('.french').hide();
    });

    $('#spanish').click(function(){
        $('.spanish').show();
        $('.english').hide();
        $('.french').hide();
    });

    $('#french').click(function() {
        $('.spanish').hide();
        $('.english').hide();
        $('.french').show();
    });
});

The filters are buttons and the sections are <divs>'s. The buttons have ids with the name of the language and the div sections have a class with the name of the language. I have tried a lot of things like document.getElementByClassName() and alerts but it looks like the jquery doesn't recognize the function hide() or show() after the click. It displays "Uncaught TypeError: undefined is not a function" error in the console.

Upvotes: 0

Views: 1423

Answers (2)

Jonathan Crowe
Jonathan Crowe

Reputation: 5803

You have 3 versions of jquery being loaded on your site which is the likely cause of this issue.

I recommend leaving the google hosted version of jquery and removing the other two:

<script src="js/jquery-migrate-1.1.1.min.js"></script>

and

<script>
    window.jQuery || document.write('<script src="js/jquery-1.9.1.min.js"><\/script>')
</script>

The google hosted version has the added benefit of being CDN driven for faster download by your users.

With only one version of jquery running on your site you should not see these issues any longer. If for some reason you cannot remove these extra jquery libraries you could change all of your $ to jQuery

for example:

$('.english').show()

becomes:

jQuery('.english').show()

Upvotes: 0

Shan
Shan

Reputation: 475

I think this is about multiple id problem.Please review your code once again. Put an alert to check if it is jquery conflict.

Otherwise try to use $(".spanish").css('dispaly','none'); and $(".spanish").css('dispaly','block');

Upvotes: 1

Related Questions