<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { height: 100vh; margin: 0; display: grid; } body { grid-template-columns: 1fr 0 0; } body.middle-shown { grid-template-columns: 0 1fr 0; } body.right-shown { grid-template-columns: 0 0 1fr; } @media(min-width: 800px) { /* body without middle-shown is used when having middle-panel-placeholder, which shouldn't be the panel shown on < 800px) */ body, body.middle-shown { grid-template-columns: 2fr 3fr ; } body.right-shown { grid-template-columns: 0 3fr 2fr; } } @media(min-width: 1024px) { body { grid-template-columns: 1fr 3fr 0; } body.right-shown { grid-template-columns: 1fr 3fr 1fr; } } .left-panel { grid-column: 1; background: red; color: white; } .middle-panel-placeholder, .middle-panel { color: white; background: blue; grid-column: 2; } .middle-panel { display: none; } .right-panel { grid-column: 3; background: green; color: white; display: none; } </style> </head> <body> <div class="left-panel"> <ul> <li>Room 1</li> <li>Room 2</li> <li>Room 3</li> <li>Room 4</li> <li>Room 5</li> <li>Room 6</li> <li>Room 7</li> <li>Room 8</li> <li>Room 9</li> <li>Room 10</li> <li>Room 11</li> <li>Room 12</li> </ul> </div> <div class="middle-panel-placeholder"> <h2>Select a room on the left side</h2> </div> <div class="middle-panel"> <ul> <li>Message 1, message 1, message 1, message 1, message 1, message 1, message 1, message 1</li> <li>Message 2, message 2, message 2, message 2, message 2, message 2, message 2, message 2</li> <li>Message 3, message 3, message 3, message 3, message 3, message 3, message 3, message 3</li> <li>Message 4, message 4, message 4, message 4, message 4, message 4, message 4, message 4</li> <li>Message 5, message 5, message 5, message 5, message 5, message 5, message 5, message 5</li> <li>Message 6, message 6, message 6, message 6, message 6, message 6, message 6, message 6</li> <li>Message 7, message 7, message 7, message 7, message 7, message 7, message 7, message 7</li> <li>Message 8, message 8, message 8, message 8, message 8, message 8, message 8, message 8</li> <li>Message 9, message 9, message 9, message 9, message 9, message 9, message 9, message 9</li> <li>Message 10, message 10, message 10, message 10, message 10, message 10, message 10, message 10</li> <li>Message 11, message 11, message 11, message 11, message 11, message 11, message 11, message 11</li> <li>Message 12, message 12, message 12, message 12, message 12, message 12, message 12, message 12</li> </ul> </div> <div class="right-panel"> <h2>Bruno</h2> <p>Ban | Kick | Mock</p> </div> <script type="text/javascript"> const left = document.querySelector(".left-panel"); const middle = document.querySelector(".middle-panel"); const middlePlaceholder = document.querySelector(".middle-panel-placeholder"); const right = document.querySelector(".right-panel"); const container = document.body; left.addEventListener("click", () => { // middle or right shown if (container.className) { container.className = ""; middle.style.display = ""; right.style.display = ""; middlePlaceholder.style.display = "block"; } else { container.className = "middle-shown"; middle.style.display = "block"; middlePlaceholder.style.display = "none"; right.style.display = ""; } }); middle.addEventListener("click", () => { if (container.className === "right-shown") { container.className = "middle-shown"; right.style.display = ""; } else { container.className = "right-shown"; right.style.display = "block"; } }); </script> </body> </html>