Удаление/добавление класса изначально скрытому элементу при нажатии на кнопку (без JQ)

Question

Имеются 3 скрытых блока с инпутами внутри и 3 кнопки, каждый из блоков имеет класс:

.visually-hidden{
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    clip: rect(0 0 0 0 );
    overflow: hidden;
}

Подскажите пожалуйста, как написать на Js'е код, что бы по нажатию на одну из кнопок появлялся определенный блок, затем при нажатии на другую кнопку появлялся другой блок, а который был показан до этого пропадал(то есть в одно время мог быть показан только один блок, остальные обратно прятались под класс visually-hidden)
P.S. Буду очень благодарен если это будет сделано с помощью element.classList, тк возможно пойму что я делал не так

Answer 1

Мне кажется, самое простое - использовать classList.Toggle. Т.е при клике добавляется класс. В вашем случае .visually-hidden, а по второму клику - убирает класс, соответственно, элемент виден. В целом, хотелось бы увидеть html-код, чтобы уже конкретнее можно было что-то сказать.

Answer 2

Не думаю что самое правильно решение, как минимум выглядит что можно и лучше, но оно работает. Просто добавил проверку на то, скрыт ли блок сейчас.

document.getElementById('linear').onclick = function() {
    document.getElementById('border-builder__linear').classList.toggle('visually-hidden');
    if((document.getElementById('border-builder__vert').classList.contains('visually-hidden')) === false){
        document.getElementById('border-builder__vert').classList.toggle('visually-hidden');
    }
    if((document.getElementById('border-builder__custom').classList.contains('visually-hidden')) === false){
        document.getElementById('border-builder__custom').classList.toggle('visually-hidden');
    }
}
document.getElementById('vertical').onclick = function() {
    document.getElementById('border-builder__vert').classList.toggle('visually-hidden');
    if((document.getElementById('border-builder__linear').classList.contains('visually-hidden')) === false){
        document.getElementById('border-builder__linear').classList.toggle('visually-hidden');
    }
    if((document.getElementById('border-builder__custom').classList.contains('visually-hidden')) === false){
        document.getElementById('border-builder__custom').classList.toggle('visually-hidden');
    }
}
document.getElementById('custom').onclick = function() {
    document.getElementById('border-builder__custom').classList.toggle('visually-hidden');
    if((document.getElementById('border-builder__linear').classList.contains('visually-hidden')) === false){
        document.getElementById('border-builder__linear').classList.toggle('visually-hidden');
    }
    if((document.getElementById('border-builder__vert').classList.contains('visually-hidden')) === false){
        document.getElementById('border-builder__vert').classList.toggle('visually-hidden');
    }
}

https://jsfiddle.net/yh097L8t/

БЛОГ НА HUSL

Удаление/добавление класса изначально скрытому элементу при нажатии на кнопку (без JQ)

Ответы (2 шт):