Скрыть/показать несколько div по классам

Question

http://maximebichon.net/test.html

Адрес сайта. Моя проблема очень проста. Как вы можете видеть на странице, в нижней части меню говорится «fr/en». Очевидно, я хотел бы иметь какой-то французский/английский переключатель. Поскольку это веб-сайт с ручным вводом, я хотел бы добавить простой jquery, который, когда пользователь нажимает на fr или en, скрывает определенный класс и показывает другой.

Вот код, который я использовал до сих пор (нашел на StackOverflow):

$(document).click(function() { 
var toggleElements = $(".toggleMe"); 
$.each(toggleElements, function (key, value) { 
    if (value.hasClass('hidden')) { 
     value.removeClass('hidden'); 
     value.addClass('shown'); 
    } else { 
     if (value.hasClass('shown')) { 
      value.removeClass('shown'); 
      value.addClass('hidden'); 
     } 
    } 
}); 
}); 

Вот CSS (довольно простой)

.hidden{ 
display: none; 
} 
.shown{ 
display: block; 
} 

Не могли бы вы сказать мне, что случилось? И что я должен добавить в href или класс ссылки для переключения языка? Спасибо большое!

Answer 1

Почему бы просто не использовать метод JQuery .toggleClass() как:

$(document).click(function() { 
    var $toggleElements = $(".toggleMe"); 
    $toggleElements.toggleClass('hidden shown'); 
}); 

DEMO #1

Answer 2

Предполагая, что ваша логика верна, попробуйте использовать $ (значение) вместо 'значение'

$(document).click(function() { 
var toggleElements = $(".toggleMe"); 
$.each(toggleElements, function (key, value) { 
    if ($(value).hasClass('hidden')) { 
     $(value).removeClass('hidden'); 
     $(value).addClass('shown'); 
    } else { 
     if ($(value).hasClass('shown')) { 
      $(value).removeClass('shown'); 
      $(value).addClass('hidden'); 
     } 
    } 
}); 
}); 

Answer 3

это должно быть

var $toggleElements = $(".toggleMe"); 
$toggleElements.click(function() { 
    $toggleElements.toggleClass('hidden shown'); 
});