Push Bar

HTML

<div style="display: flex;flex-direction: column;">
    <div id="content" style="height: 200px;overflow: hidden;">
        Use this component for a common styling of a bar that would expand or collapse another element.<br/><br/>This is an example (also see the HTML section) of a <i>content</i> element, that gets collapsed/expanded, and the actual push bar, which is
        wrapped in the <i>PUSHBAR component</i> comment.<br/><br/>Use your framework of choice to handle content element size and bar icon change (handled by the <i>toggleContent</i> function below), add transitions (can simply be added to the parent
        div of the kx-push-bar and to the content element), etc.
    </div>
    <!-- PUSHBAR component -->
    <div>
        <div class="kx-push-bar kx-push-bar__horizontal" onclick="toggleContent()">
            <em class="kx-icon kx-icon--size-moderate kx-push-bar__icon">
                <svg focusable="false">
                    <use id="image" xlink:href="/assets/img/icons/sprites/icons.svg#chevron-up"></use>
                </svg>
            </em>
        </div>
    </div>
    <!---->
</div>

<script type="application/javascript">
    function toggleContent() {
        let svgElement = document.getElementById('image');
        let contentElement = document.getElementById('content');
        let height = contentElement.clientHeight;
        let newHeight = 200;
        if (height) {
            newHeight = 0;
        }
        contentElement.style.height = `${newHeight}px`;
        let isUp = svgElement.getAttribute('xlink:href').endsWith('up');
        if (isUp) {
            svgElement.setAttribute('xlink:href', '/assets/img/icons/sprites/icons.svg#chevron-down');
        } else {
            svgElement.setAttribute('xlink:href', '/assets/img/icons/sprites/icons.svg#chevron-up');
        }
    }
</script>

View

<div style="display: flex;{% if orientation == 'horizontal' %}flex-direction: column;{% endif %}">
    <div id="content" style="{% if orientation == 'vertical' %}width: 300px; height: 350px;{% else %}height: 200px;{% endif %}overflow: hidden;">
        {{ content }}
    </div>
    <!-- PUSHBAR component -->
    <div>
        <div class="kx-push-bar kx-push-bar__{{ orientation }}" onclick="toggleContent()">
            <em class="kx-icon kx-icon--size-moderate kx-push-bar__icon">
                <svg focusable="false">
                    <use id="image" xlink:href="/assets/img/icons/sprites/icons.svg#chevron-{% if orientation == 'vertical' %}left{% else %}up{% endif %}"></use>
                </svg>
            </em>
        </div>
    </div>
    <!---->
</div>

<script type="application/javascript">
    {% if orientation == 'horizontal' %}

    function toggleContent() {
        let svgElement = document.getElementById('image');
        let contentElement = document.getElementById('content');

        let height = contentElement.clientHeight;
        let newHeight = 200;
        if (height) {
            newHeight = 0;
        }
        contentElement.style.height = `${newHeight}px`;

        let isUp = svgElement.getAttribute('xlink:href').endsWith('up');
        if (isUp) {
            svgElement.setAttribute('xlink:href', '/assets/img/icons/sprites/icons.svg#chevron-down');
        } else {
            svgElement.setAttribute('xlink:href', '/assets/img/icons/sprites/icons.svg#chevron-up');
        }
    }

    {% else %}

     function toggleContent() {
        let svgElement = document.getElementById('image');
        let contentElement = document.getElementById('content');

        let width = contentElement.clientWidth;
        let newWidth = 300;
        if (width) {
            newWidth = 0;
        }
        contentElement.style.width = `${newWidth}px`;

        let isLeft = svgElement.getAttribute('xlink:href').endsWith('left');
        if (isLeft) {
            svgElement.setAttribute('xlink:href', '/assets/img/icons/sprites/icons.svg#chevron-right');
        } else {
            svgElement.setAttribute('xlink:href', '/assets/img/icons/sprites/icons.svg#chevron-left');
        }
    }

    {% endif %}
</script>