@NO1nam

Как закрыть одно поля если другое открыто?

У меня вот такой код он когда нажимаешь открыть окно он открывает всех а мне нужно если к примеру открыл сначала showCallme и потом выбрал showTelegram то что бы старый showCallme закрылся
window.onload = function () {
        document.getElementById('showCallme').onclick = function () {
        if(document.getElementById('callme').style.display == 'none') {
    document.getElementById('callme').style.display = 'block'
        } else {
    document.getElementById('callme').style.display = 'none'
        }
    };
	
	document.getElementById('showTelegram').onclick = function () {
        if(document.getElementById('Telegramw').style.display == 'none') {
    document.getElementById('Telegramw').style.display = 'block'
        } else {
    document.getElementById('Telegramw').style.display = 'none'
        }
    };
         document.getElementById('showWhatsapps').onclick = function () {
        if(document.getElementById('whatsao').style.display == 'none') {
    document.getElementById('whatsao').style.display = 'block'
        } else {
    document.getElementById('whatsao').style.display = 'none'
        }
    };
};

5f0e19a17dccb825828847.png
5f0e19c2a45ee291409059.png
  • Вопрос задан
  • 45 просмотров
Пригласить эксперта
Ответы на вопрос 3
Tim-A-2020
@Tim-A-2020
Помог? Отметь решением
можно воспользоваться таким вариантом
Ответ написан
Armrisch
@Armrisch
Full Stack Developer
Ну чтобы было проще сначала добавь всем кнопкам какой нибудь одинаковый класс типа show далее находим их всех с помощю querySelectorAll() в массив
И так же всем скрытым div к примеру класс hidden
allShowButtons = document.querySelectorAll(.show);
allHiddenForm = document.querySelectorAll(.hidden);
//потом цыклом прикрепляем всем функцию для показа при клике
for(let i =0;i<allShowButtons.length;i++){
      allShowButtons[i].onclick = showForm;
}
//далее  пишем функцию showForm
function showForm() {
///сначала в цыкле скрываем все form чтобы потом ниже в коде показать нужный
for(let i = 0;i<allHiddenForm.length;i++){
      allHiddenForm[i].style.display = "none";
} 
//Проверяем по отличающимуся классу кнопки, на какую кнопку нажали,
//так как в this попадает та кнопка по которой кликнули, и затем находим тот
//скрытый form на кнопку которой нажали, далее проверками получаем нужный
//скрытый div и в самом низу делаем его display блоком
if(this.classList.contains(showTelegram)){
     showDiv = document.querySelector(#telegram);}///тут нужно написать id соответствующего скрытого дива
else if(this.classList.contains(showNumber)){
     showDiv = document.querySelector(#number);
}
else{
     showDiv = document.querySelector(#whatsup);
}
  showDiv.style.display = "block";
}

//ps возможны ошибки так как пишу на быструю руку с телефона
Ответ написан
v3shin
@v3shin
Веб-шаман
Ба, да это же табы! Вот так их можно реализовать без js:
<label for="tab1">tab1 button</label><br>
<label for="tab2">tab2 button</label><br>
<label for="tab3">tab3 button</label><br>

<div class="tab">
    <input type="radio" name="tabRadio" id="tab1" class="tab__radio">
    <div class="tab__content">tab1 content</div>
</div>
<div class="tab">
    <input type="radio" name="tabRadio" id="tab2" class="tab__radio">
    <div class="tab__content">tab2 content</div>
</div>
<div class="tab">
    <input type="radio" name="tabRadio" id="tab3" class="tab__radio">
    <div class="tab__content">tab3 content</div>
</div>

<style>
.tab .tab__radio,
.tab .tab__content {
    display: none;
}
.tab .tab__radio:checked + .tab__content {
    display: block;
}
</style>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы