При клике увеличить ширину блока и при клике ".close" возвращать в исходное положение

[Freemasterkg]

Доброго времени суток. Мне помощь такая нужна (в JavaScript-е новичок). По скольку вместо навигации у меня 4 раздела на монитор высотою height: 100vh(100%) и шириной width: 25vw(25%); с адаптацией (пока под смартфоны не настроил) при клике должно увеличиваться на всю ширину монитора (дисплея), при этом содержимое этого блока приобретать должен свойство display: block; а остальные 3 блока (навигации) наоборот display: none; полностью исчезнуть с монитора. И само собой при клике на ".close" всё это в обратную сторону. 

У меня остальные блоки падают вниз (или еще бог знает куда), ".close" не закрывает. А так же прощу помочь с другими проблемами которые не описал тут если заметите.

Заранее благодарен

Вот что у меня получилось https://jsfiddle.net/Freemasterkg/aq9Laaew/261903/

И то скрипты нашел в интернете. Но думаю тут нужна помощь ГУРУ

Edited November 2, 2018 by Freemasterkg

[Switch74]

можно без js как-нить так
https://jsfiddle.net/srfc907t/

[Freemasterkg]

В 02.11.2018 в 11:15, Switch74 сказал:

можно без js как-нить так
https://jsfiddle.net/srfc907t/

$(".content1").click(function() {
      $(this).addClass("opened");
    $(".content2").addClass("dysplay-none");
    $(".content3").addClass("dysplay-none");
    $(".content4").addClass("dysplay-none");
  
});

Таким путем нашел способ убрать соседние блоки.

https://jsfiddle.net/Freemasterkg/aq9Laaew/263144/

 

Теперь осталась проблема что close не работает, точнее не впускает всё в обратную сторону.

Вопрос таков при нажатии на .close Нужно убрать классы и всё. Проблема решена.

Вот как я вижу решение проблемы (только не получается).

$(".content1 .close").click(function(){
  $(".content1").removeClass("opened");
  $(".content2").removeClass("dysplay-none");
  $(".content3").removeClass("dysplay-none");
  $(".content4").removeClass("dysplay-none");
});

https://jsfiddle.net/Freemasterkg/aq9Laaew/263144/

Edited November 3, 2018 by Freemasterkg
Другой вопрос

[Freemasterkg]

В 02.11.2018 в 11:15, Switch74 сказал:

можно без js как-нить так
https://jsfiddle.net/srfc907t/

Ура!

Надеюсь у меня всё.

https://jsfiddle.net/Freemasterkg/aq9Laaew/263161/

Просто подскажи пожалуйста, всё правильно сделано? В дальнейшем проблем у меня не будет? Проверь pleas.

[Switch74]

я бы так не делал
скрипт можно упростить
https://jsfiddle.net/ty1g9mxv/
по css не вникал, слишком много кода, но подозреваю, что и там можно упростить

[Freemasterkg]

Вообще супер. Благодарен.

Скоро приступаю к изучению JavaScript. Будут ли советы где именно начинать.

[Switch74]

суть везде одинаковая на мой взгляд
для изучения вполне подойдет справочники
и форумы
все это можно найти на https://learn.javascript.ru/