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

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]

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