Expand Row

Library for handling expanding content within cols and rows of content.

Installation

npm install @curiousmedia/expand-row -D

Example

Javascript

import ExpandRow from '@curiousmedia/expand-row';

let expand = new ExpandRow(
    document.querySelectorAll('.item'),
    document.querySelector('.content')
);
expand.init();

HTML

<div class="items">
    <div class="item" style="order: 0">
        <div>1</div>
    </div>
    <div class="item" style="">
        <div>2</div>
    </div>
    <div class="item" style="order: 4">
        <div>3</div>
    </div>
    <div class="item" style="order: 6">
        <div>4</div>
    </div>
    <div class="item" style="order: 8">
        <div>5</div>
    </div>
    <div class="item" style="order: 10">
        <div>6</div>
    </div>
    <div class="item" style="order: 12">
        <div>7</div>
    </div>
    <div class="item" style="order: 14">
        <div>8</div>
    </div>
    <div class="content">
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis cupiditate doloribus eligendi ex fugit
        laudantium reiciendis rerum voluptas. Ad at doloremque earum eligendi expedita ipsum odit quibusdam
        reiciendis saepe totam!
    </div>
</div>

CSS

.items {
    display: flex;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.item {
    box-sizing: border-box;
    padding: 0 10px;
    margin-bottom: 20px;
}

.item > div {
    background-color: blue;
    height: 200px;
}

.content {
    display: none;
    margin: 0 10px 20px 10px;
}

.content.visible {
    display: block;
}

@media only screen and (max-width: 640px) {
    .item {
        flex-basis: 50%;
    }
}

@media only screen and (min-width: 641px) and (max-width: 960px) {
    .item {
        flex-basis: 33.3333%;
    }
}

@media only screen and (min-width: 961px) {
    .item {
        flex-basis: 25%;
    }
}