Today we are recreating a layout switcher we did with Tailwind CSS and Allpine JS but with Vainilla JavaScript.
A layout switcher is a component that allows the user to switch between two different grid layouts. It’s commonly used in web applications to display different content in a grid format. The layout switcher can be used to switch between two different grid layouts, such as two columns or four columns, or none at all. It’s a simple and effective way to display content in a grid format, making it easy to organize and present information.
This is the structure of the project: Understanding the code:
<div id="toggleButton">
: This is the button that toggles the grid layout.<div id="gridContainer">
: This is the ID for the grid layout so we can grab it with JavaScript and toggle the grid layout.Classes are removed for brevity, but I’ll keep those classes relevant to the tutorial.
<div>
<div>
<!-- Toggle Button -->
<button
id="toggleButton">
Switch to 2 Columns
</button>
</div>
<!-- Grid Layout -->
<div
id="gridContainer"
class="grid grid-cols-4 ...">
<!-- Items in the Grid -->
<div class="...">Item 1</div>
<div class="...">Item 2</div>
<div class="...">Item 3</div>
<div class="...">Item 4</div>
<div class="...">Item 5</div>
<div class="...">Item 6</div>
<div class="...">Item 7</div>
<div class="...">Item 8</div>
</div>
</div>
document.addEventListener("DOMContentLoaded", () => {
: This is the event listener that will run when the page is loaded.const toggleButton = document.getElementById("toggleButton");
: This is the button that toggles the grid layout.const gridContainer = document.getElementById("gridContainer");
: This is the ID for the grid layout so we can grab it with JavaScript and toggle the grid layout.toggleButton.addEventListener("click", () => {
: This is the event listener that will run when the button is clicked.const isFourColumns = gridContainer.classList.toggle("grid-cols-4");
: This is the code that toggles the grid layout.gridContainer.classList.toggle("grid-cols-2", !isFourColumns);
: This is the code that toggles the grid layout.toggleButton.textContent = isFourColumns ? "Switch to 2 Columns" : "Switch to 4 Columns";
: This is the code that changes the text of the button.document.addEventListener("DOMContentLoaded", () => {
const toggleButton = document.getElementById("toggleButton");
const gridContainer = document.getElementById("gridContainer");
toggleButton.addEventListener("click", () => {
const isFourColumns = gridContainer.classList.toggle("grid-cols-4");
gridContainer.classList.toggle("grid-cols-2", !isFourColumns);
toggleButton.textContent = isFourColumns ?
"Switch to 2 Columns" :
"Switch to 4 Columns";
});
});
This is a simple layout switcher that can be used for any type of content, such as a product listing, blog posts, news articles, or image galleries.
Hope you enjoyed this tutorial and have a great day!
/Michael Andreuzza
"I bought a beautiful theme from Lexington a couple weeks ago. I didn't know Astro at the time, but Michael helped me get set up and really went above and beyond with his support. Now I'm happily redoing my site to look gorgeous with his template."
Stuart
Creator of saasydb.com
"Michael is one of the best designers on Twitter, would highly recommend his Lexington Themes if you want something in tailwind that doesn’t look the same as everyone else!"
Alex Hughes
letsloopin.com
Get lifetime access to every theme available today for $199 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
No subscription required!
Beautifully designed HTML, Astro.js and Tailwind themes! Save months of time and build your startup landing page in minutes.