javascript - HTML div を同時に展開/折りたたむ

Question

クリックすると展開および折りたたまれる HTML div の行を作成しようとしています。私が何を意味するかを理解するには、この jsFiddle を参照してください: http://jsfiddle.net/Lm6Pg/3/。(すべての div が 1 行に表示されるようにするには、結果ペインを展開するか、フルスクリーンの結果を使用する必要がある場合があります。)

現在、One% CSS Gridを使用してすべての div を 1 行に表示し、さまざまな CSS 列クラスを切り替えて、現在の状態とクリックされた div に従って div を展開および折りたたみます。

<div id="content" class="onepcssgrid-1200">
<div class="onerow">
    <div class="tile col4" id="about">
        <h3>About</h3>
        <div class="text">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="tile col4" id="other">
        <h3>Other</h3>
        <div class="text">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
    <div class="tile col4 last" id="stuff">
        <h3>Stuff</h3>
        <div class="text">
            <p>Lorem ipsum dolor sit amet.</p>
        </div>
    </div>
</div>

これが私のjavascriptです（どの列クラスを切り替える必要があるかを動的に判断するのをいじっていたので、jsFiddleにあるものから変更しました）：

$(".tile").click(function() {
        var tile = $(this);
        var otherTiles = tile.siblings();
        var currentSelectedTile = otherTiles.filter(".selected");
        var unselectedOtherTiles = otherTiles.not(".selected");
        var otherTileWeight, tileWeight;
        if (currentSelectedTile.length) {
            otherTileWeight = 3;
            tileWeight = 3;
        } else {
            otherTileWeight = 4;
            tileWeight = 4;
        }

        tile.toggleClass("selected col" + tileWeight + " col6", 600);
        currentSelectedTile.toggleClass("selected col3 col4", 600);
        unselectedOtherTiles.toggleClass("col" + otherTileWeight + " col3", 600);
    });

これは、jQuery UI 関数または他のライブラリにラップされている可能性のある多くのコードのように思えますが、これをまとめたときにわかりませんでした。これを行うためのより簡単で、より簡潔な、または単により良い方法はありますか? このソリューションでは、jQuery や One% CSS Grid を使用する必要はありません。どのライブラリでも問題ありません。ただし、div が互いに重なり合っている場合でも期待どおりに機能することが望ましいレスポンシブ レイアウトである必要があります。