Как закрыть содержимое кнопки?

Question

[myway11]

Здравствуйте.
Мне надо, чтобы при нажатии на следующую кнопку содержимое предыдущих скрывалось.
И скажите, правильно ли я делаю?
Кнопок будет порядка десяти, при нажатии на кнопку должно открываться несколько блоков (например в моем случае текст и карта города. Нажимая например на Астрахань, открывается текст в одном блоке и карта города по всей ширине экрана ниже).

Comments

[myway11]

Ankhena, их будет 11, да действительно сложно. Но спасибо за подсказку. Только начинаю изучение js, не могли бы помочь,если не сложно написать такой код, я прошу прощения за такой вопрос.

[Absolute138]

Мне надо, чтобы при нажатии на следующую кнопку содержимое предыдущих скрывалось.

Предыдущих или всех остальных, кроме текущей?

[Ankhena]

Absolute138,

Предыдущих или всех остальных, кроме текущей?

Как напишете, так и будет.

[Ankhena]

myway11, дополнила ответ.

[Absolute138]

Ankhena, я не автор вопроса и ниже тоже ответил)

[Ankhena]

Absolute138, промахнулась :)

[Ankhena]

1. id может использоваться только один раз.

2. Такая запись div#name1 избыточна. Поскольку, id уникален (смотри п.1), то уточнение что это div может быть нужно в случае, если вы хотите скрывать этот блок, только если он div, но не section. Во всех остальных - это лишнее.

3. Если в href у ссылок стоит # и нет альтернативного пути на случай отсутствия js, то это не ссылки, а кнопки button

4. Логичнее переписать всё это в таком ключе:
При клике на кнопки закрываем ВСЕ блоки и открываем нужный, используя this и родственные связи.
Иначе вы обалдеете поддерживать такой код, если блоков будет не 3, а 33.

Например, так (сели скрывать только у предыдущих)
https://jsfiddle.net/u5en61ma/

html

<section>
  <button>btn 1</button>
  <div>text1</div>
</section>

<section>
  <button>btn 2</button>
  <div>text2</div>
</section>

<section>
  <button>btn 3</button>
  <div>text3</div>
</section>

<section>
  <button>btn 4</button>
  <div>text4</div>
</section>

JQ

$('button').click(function() {
  $(this).parent().prevUntil().children('div').hide();
  $(this).next('div').show();
})

Answer 1

[Absolute138]

<div class="container">
     <a href="#" class="show">Первая ссылка</a>
     <div hidden class="content">
        <div>А</div>
        <div>Б</div>
        <div>В</div>
    </div>
  </div>
  <div class="container">
     <a href="#" class="show">Вторая ссылка</a>
     <div hidden class="content">
        <div>Г</div>
        <div>Д</div>
        <div>Е</div>
    </div>
  </div>
  <div class="container">
     <a href="#" class="show">Третья ссылка</a>
     <div hidden class="content">
        <div>Е</div>
        <div>Ж</div>
        <div>Е</div>
    </div>
  </div>

$('.show').on('click', function(){
     $('.container > .content').attr('hidden','');
     $(this).next('.content').prop('hidden', false);
  });