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

Question

[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'
        }
    };
};

Comments

[Andrew]

"javascript tabs"

Answer 1

[Tim]

можно воспользоваться таким вариантом

Answer 2

[Arman Hovhannisyan]

Ну чтобы было проще сначала добавь всем кнопкам какой нибудь одинаковый класс типа 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 возможны ошибки так как пишу на быструю руку с телефона

Comments

[NO1nam]

Вот моя форма

<div class="form__group">
                <p class="form__text">Способ связи</p>
                <label for="call" class="form__group-item">
				<button class="btn js-btn-age-test" id='showCallme'>Звонок</button>
                </label>
                <label for="telegram" class="form__group-item">
					<button class="btn js-btn-age-test" id='show'>Telegram</button>
                </label>
                <label for="whatsapp" class="form__group-item">
					<button class="btn js-btn-age-test" id='showWhatsapps'>WhatsApp</button>
                </label>
            </div>
        </div>
        <div class="form__wrapper">
            <div class="form__group">
		<div id="show" class="hidden">
		<p class="form__text">Звонок</p>
		<input class="input" type="text" placeholder="Ваше имя*" name="name">
		<input class="input js-phone" type="tel" placeholder="Телефон*" name="phone" im-insert="true">
		</div>
		
		<div id="showTelegram" class="hidden">
		<p class="form__text">Telegram</p>
		<input class="input" type="text" placeholder="@username" name="name">
		</div>
		<div id="show" class="hidden">
		<p class="form__text">WhatsApp</p>
		<input class="input" type="text" placeholder="Ваше имя*" name="name">
		<input class="input js-phone" type="tel" placeholder="Телефон*" name="phone" im-insert="true">
		</div>
<script>    
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";
}
</script>
                            </div>
                        <button class="form__btn btn">Записаться</button>
            <input name="type" type="hidden" value="request">
        </div>
    </form>
    <button class="modal__close btn-secondary js-modal-close" type="button">
        <svg class="icon">
            <use xlink:href="#close"/>
        </svg>
    </button>
</section>

Что-то не получается

Answer 3

[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>