<main>
    <h1>Playing with CSS Grid... to "inject" a fullwidth grid item into a grid whose columns are <i>auto-arranged</i></h1>
    <p>Imagine a grid of product cards, where clicking on a "quick view" button "injects" a new card that is expanded full width of the entire grid, immediately below the card that was clicked (thereby allowing a visual "connection" between the two cards), and is completely responsive.</p>
    <ul>
        <li>Usually, "quick views" are rendered as popups or overlays, but in this case, an "inline" solution is required.</li>
        <li>This mock-up requires very little CSS code to achieve it, and <strong>zero media queries</strong>.</li>
        <li>In reality, the "injected" card will probably be fetched via JavaScript and placed in the correct place in the DOM. However, for demo purposes, I've directly added the fullwidth cards in their correct positions in the DOM, and I'm simply toggling their visibility.</li>
    </ul>

    <h2>Accessibility considerations</h2>
    <ul>
        <li>HTML source order is preserved for the cards, providing a good natural tab order.</li>
        <li>The "quick view" buttons behave as "toggles", so they have <code>aria-expanded</code> and <code>aria-controls</code> attributes. See <a href="https://www.w3.org/WAI/ARIA/apg/patterns/disclosure/">ARIA best practices - disclosure widget</a> for more information.</li>
        <li>Focus management ensures the "injected" card can receive keyboard focus, and on closing the card, keyboard focus is returned to the button that originally toggled the card's visibility.</li>
      <li>Read the full <a href="https://css-tricks.com/expandable-sections-within-a-css-grid/">CSS Tricks article.</a>
      </li>
    </ul>

    <ul class="grid">
        <li>
            <p>1</p>
        </li>
        <li>
            <p>2</p>
            <button type="button" data-quick-view>Quick view</button>
        </li>
        <li class="fullwidth is-hidden" id="quickview-01">
            <button type="button" data-close>Close 2</button>
            <p>fullwidth 2</p>
            <p>This grid item needs to stretch the full width of the page, and force other grid items to reflow around it, whilst remaining "visually connected" to the preceeding grid item.</p>
            <p>Test <a href="#">inline link</a>.</p>
        </li>
        <li>
            <p>3</p>
        </li>
        <li>
            <p>4</p>
            <button type="button" data-quick-view>Quick view</button>
        </li>
        <li class="fullwidth is-hidden" id="quickview-04">
            <button type="button" data-close>Close 4</button>
            <p>fullwidth 4</p>
            <p>This grid item needs to stretch the full width of the page, and force other grid items to reflow around it, whilst remaining "visually connected" to the preceeding grid item.</p>
            <p>Test <a href="#">inline link</a>.</p>
        </li>
        <li>
            <p>5</p>
            <button type="button" data-quick-view>Quick view</button>
        </li>
        <li class="fullwidth is-hidden" id="quickview-05">
            <button type="button" data-close>Close 5</button>
            <p>fullwidth 5</p>
            <p>This grid item needs to stretch the full width of the page, and force other grid items to reflow around it, whilst remaining "visually connected" to the preceeding grid item.</p>
            <p>Test <a href="#">inline link</a>.</p>
        </li>
        <li>
            <p>6</p>
        </li>
        <li>
            <p>7</p>
        </li>
        <li>
            <p>8</p>
        </li>
    </ul>
</main>

ul[class] {
    margin: 0;
    padding: 0;
}

ul[class] li {
    list-style: none;
}

ul[class] li > * {
    margin: 1rem;
}

:focus {
    box-shadow: 0 0 0 0.25rem rebeccapurple;
    outline: 0;
}

/* [1] 'auto-fit' grid columns, so no media queries required. */
/* [2] 'dense' packing fills in holes earlier in the grid. */
.grid {
    display: grid;
    gap: 1rem;
    grid-auto-flow: dense; /* [2] */
    grid-template-columns: repeat(auto-fit, 20rem); /* [1] */
    justify-content: center;
}

.grid > * {
    align-items: flex-start;
    background: #eee;
    display: flex;
    flex-direction: column;
    height: 100%;
}

/* [3] Make fullwidth card span all grid columns. */
.fullwidth {
    grid-column: 1 / -1;
}

.is-hidden {
    display: none;
}

.fullwidth,
.is-selected {
    background: wheat;
}

const quickViewButtons = document.querySelectorAll('[data-quick-view]');
const closeButtons = document.querySelectorAll('[data-close]');
const fullwidthCards = document.querySelectorAll('.fullwidth');
let toggle; // Quick view <button>.
let toggleParent; // <li>.
let fullwidth; // Fullwidth card to be "injected".

const openQuickView = (toggle, toggleParent, fullwidth) => {
    toggle.setAttribute('aria-expanded', 'true');
    toggleParent.classList.toggle('is-selected');
    fullwidth.classList.toggle('is-hidden');
    // Make fullwidth card keyboard focusable.
    fullwidth.setAttribute('tabIndex', '0');
};

const closeQuickView = (toggle, toggleParent, fullwidth) => {
    toggle.setAttribute('aria-expanded', 'false');
    toggleParent.classList.toggle('is-selected');
    fullwidth.classList.toggle('is-hidden');
    fullwidth.removeAttribute('tabIndex');
};

quickViewButtons.forEach(quickView => {
    // Add appropriate ARIA attributes for "toggle" behaviour.
    fullwidth = quickView.parentElement.nextElementSibling;
    quickView.setAttribute('aria-expanded', 'false');
    quickView.setAttribute('aria-controls', fullwidth.id);

    quickView.addEventListener('click', (e) => {
        toggle = e.target;
        toggleParent = toggle.parentElement;
        fullwidth = toggleParent.nextElementSibling;

        // Open (or close) fullwidth card.
        if (toggle.getAttribute('aria-expanded') === 'false') {
            // Do we have another fullwidth card already open? If so, close it.
            fullwidthCards.forEach(fullwidthOpen => {
                if (!fullwidthOpen.classList.contains('is-hidden')) {
                    toggleParentOpen =
                        fullwidthOpen.previousElementSibling;
                    toggleOpen = toggleParentOpen.querySelector(
                        '[data-quick-view]'
                    );

                    closeQuickView(toggleOpen, toggleParentOpen, fullwidthOpen);
                }
            });

            openQuickView(toggle, toggleParent, fullwidth);
        } else {
            closeQuickView(toggle, toggleParent, fullwidth);
        }
    });
});

closeButtons.forEach(close => {
    close.addEventListener('click', (e) => {
        fullwidth = e.target.parentElement;
        toggleParent = e.target.parentElement.previousElementSibling;
        toggle = toggleParent.querySelector('[data-quick-view]');

        closeQuickView(toggle, toggleParent, fullwidth);
        toggle.focus(); // Return keyboard focus to "toggle" button.
    });
});