Как одновременно один блок скрыть, а другой показать при клике?

Question

[Наталия]

Добрый день!
есть такая тема:

<div class="hidden_box">
Этот текст, который изначально скрыт
</div>
<div class="text_box">
Этот текст, который изначально виден
</div>
<div class="click_box">
Открыть тут
</div>

Необходимо, чтобы при клике на click_box
скрытый блок (hidden_box) отображался,
а изначально видимый блок (text_box) скрывался,
при этом фраза Открыть тут менялась на Свернуть.

Заранее спасибо.

Answer 1

[Андрей]

Держите

Comments

[Наталия]

Большое спасибо! надо еще, чтоб Открыть тут менялось на Свернуть

[Андрей]

Добавил

[Наталия]

Андрей: спасибо еще раз!

[Наталия]

Андрей: а если мне нужно вместе с Открыть тут поставить , например, еще и иконку, тогда как можно правильно это прописать ?
(может, toggler.innerHTML = 'Открыть тут <div class="icon_name"></div>' как-то можно использовать ? )

Answer 2

[Александр Аксентьев]

В чем сложнсть?

Всё описали, 3 действия.
И столько же строк кода.

Вот есть пачка функций. Какие больше нравятся, те и использовать.
youmightnotneedjquery.com/#show
youmightnotneedjquery.com/#hide
youmightnotneedjquery.com/#toggle_class
youmightnotneedjquery.com/#set_text
youmightnotneedjquery.com/#get_text

ну и youmightnotneedjquery.com/#on для click

Comments

[Наталия]

Если не сложно, напишите, пожалуйста, как должен выглядеть сам код js. у меня не получается сочетать именно эти одновременные противоположные события для разных блоков.

Answer 3

[lega]

Вариант ещё проще: https://jsfiddle.net/lega911/v9dt5eqa/

Comments

[Наталия]

этот вариант, к сожалению, не сработал по факту.