Как сделать переключение div-ов по клику?

Question

[prrrrrrr]

Подскажите, как сделать переключение div-ов по клику? То есть чтобы изначально был виден один, а при клике на ссылку — первый прятался (может по типу display:none), а второй включался на его месте

К примеру:

<div class="one" style="display:block;">Hello</div>
<div class="two" style="display:none;">Hi</div>

<a>Переключить</a>

и наоборот

Comments

[Froggyweb]

ну к примеру js accorgion в гугле и выбираешь подходящее решение. как пример https://codepen.io/brenden/pen/Kwbpyj
или простой скрипт на js со саней логикой
или комбинация советов

Answer 1

[Ihor Bratukh]

(function () {
    'use strict';

    var selector = {
        $button: document.querySelector('a'),
        $one: document.querySelector('.one'),
        $two: document.querySelector('.two')
    };

    selector.$button.addEventListener('click', function (event) {
        event.preventDefault();
        if (isHidden(selector.$one)) {
            changeDisplay(selector.$one, 'block');
            changeDisplay(selector.$two, 'none');
        } else {
            changeDisplay(selector.$one, 'none');
            changeDisplay(selector.$two, 'block');
        }
    });

    function changeDisplay($node, value) {
        $node.style.display = value;
        return $node;
    }

    function isHidden($node) {
        return window.getComputedStyle($node).display === 'none';
    }

}());

Comments

[Ihor Bratukh]

Но это одноразовый вариант, вот вам накидал небольшой мини плагин, чтобы можно было использовать много раз на странице с разными настройками и разметкой

<div class="container">
    <div class="container-buttons">
        <a href="#" data-block="one">Первый</a>
        <a href="#" data-block="two">Второй</a>
    </div>
    <div class="container-block">
        <div data-block="one">Текст первого блока</div>
        <div data-block="two">Текст второго блока</div>
    </div>
</div>

<script>
;(function () {
    'use strict';

    window.tabs = function (options) {
        var setting = Object.assign({}, {
            /* Селектор общего контейнера табов */
            container: '.container',
            
            /* Селектор кнопок табов */
            buttons: '.container-buttons > a',

            /* Селектор содержимого табов */
            block: '.container-block > div',

            /* Название data-* атриубта для идентификации содержимого таба */
            dataAttr: 'block',

            /* Название события, при котором табы будут открыватся */
            trigger: 'click',

            /* CSS значение, если блок показан и если скрыт. Например если разметка на flex, то свойство show должно быть "flex" */
            display: {
                show: 'block',
                hide: 'none'
            }
        }, options || {});

        var $containers = document.querySelectorAll(setting.container);
        var events = setting.trigger.split(' ');

        Array.prototype.forEach.call($containers, function ($container) {
            var selector = {
                $buttons: $container.querySelectorAll(setting.buttons),
                $block: $container.querySelectorAll(setting.block)
            };
            Array.prototype.forEach.call(selector.$buttons, function ($button) {
                events.forEach(function (event) {
                    $button.addEventListener(event, function (e) {
                        e.preventDefault();
                        var uuid = this.dataset[setting.dataAttr];
                        Array.prototype.forEach.call(selector.$block, function ($block) {
                            if ($block.dataset[setting.dataAttr] === uuid) {
                                $block.style.display = setting.display.show;
                            } else {
                                $block.style.display = setting.display.hide;
                            }
                        });
                    });
                })
            });
        });
    };

}());

;(function () {
    'use strict';

    window.tabs(/* Объект параметров */);

}());
</script>

[Ольга Ветер]

BRAGA96, о ужас, вы существуете...

[Ihor Bratukh]

Ольга Ветер, ?

Answer 2

[lb-web]

Тут шок контент предлагают.
https://codepen.io/anon/pen/EGEZYY
на jquery
в 2 строчки.

Comments

[Ольга Ветер]

это и на js можно сделать в две строчки...

[lb-web]

Можно, не спорю. Но jquery как-то мне нравится больше)