lazy_mind

// элементу присвойте id="langswitch"

// таймаут на 10 сек
let langswitchTimeout = setTimeout(() => {
    document.querySelector('#langswitch').classList.add('langswitch__hidden');
}, 10000);

// при наведении курсора - отменить скрытие
document.querySelector('#langswitch').addEventListener('mouseover', function () {
    if (langswitchTimeout) clearTimeout(langswitchTimeout);
});

// скрыть/показать по клику на .langswitch__toggler
document.querySelector('#langswitch .langswitch__toggler').addEventListener('click', function (e) {
    e.target.closest('.langswitch').classList.toggle('.langswitch__hidden');
});

Теперь элемент будет скрываться/отображаться с помощью класса langswitch__hidden. А с css разберетесь сами.

Через медиа-запрос и псевдоэлемент можно вот так, немного подправил ваши стили. Ну и вместо стрелки можно картинку залить. Разметку с языками допишите сами, там принцип тот же.