Открытие блоков независимо друг от друга??

Question

[stepaniwe]

https://codepen.io/st-iv/pen/VzQNgM При разрешении менее 500 px 2 кнопки "contacts" и "menu". если кликнуть на "menu" а затем на "contacs" содержимое двух кнопок отображается вместе. Нужно чтобы было независимо: клик на menu-отображение содержимого, клик на contacts-содержимое menu сворачивается и появляется содержимое contacts. И с contacts в точности наоборот. Мучаюсь с этим вопросом, как лучше?? ссылку на codepen привел

Comments

[Ankhena]

1. Первым ходом все закрыть, потом нужную открыть.
2. Сначала проверять открыта ли другая, если да, то закрывать. Потом открывать нужную.

[stepaniwe]

Ankhena W: ну это прямо очевидно, а вот нужен пример кода

Answer 1

[0xD34F]

Кнопкам дать общий класс, а для понимания, какая кого должна открывать, добавить data-атрибут, содержащий соответствующий селектор; Спискам, видимость которых надо переключать, тоже дать общий класс:

<a href="#" class="menu-trigger" data-list="#menu">Menu</a>
<a href="#" class="menu-trigger" data-list="#contacts">Contacts</a>
<ul id="menu" class="list">...</ul>
<ul id="contacts" class="list">...</ul>

При нажатии на кнопку прячете все списки, кроме связанного с нажатой кнопкой - его состояние изменяете на противоположное:

$('.menu-trigger').click(function() {
  var list = this.dataset.list;

  $(this).parent().find('.list').not(list).slideUp(0);
  $(list).slideToggle(500);
});

$(window).resize(function() {
  if ($(window).width() > 500) {
    $('.list').removeAttr('style');
  }
});

https://jsfiddle.net/nvgpfm7j/

Answer 2

[Александр Ковалев]

Самый простой вариант:

$(document).ready(function() {
  $('.menu-trigger').click(function() {
    $('.menu').slideDown(500);
    $('.contacts').slideUp(0);    
  });//end slide toggle
  
  $(window).resize(function() {		
		if (  $(window).width() > 500 ) {			
			$('.menu').removeAttr('style');
		 }
	});//end resize
});//end ready


$(document).ready(function() {
  $('.menu-trigger2').click(function() {    
    $('.contacts').slideDown(500);
    $('.menu').slideUp(0);
  });//end slide toggle
  
  $(window).resize(function() {		
		if (  $(window).width() > 500 ) {			
			$('.contacts').removeAttr('style');
		 }
	});//end resize
});//end ready