<style>
/* ---------------------------------------------------- */
/* STRUCTURE & BASE STYLES */
/* ---------------------------------------------------- */
.logos-wrapper {
max-width: 1140px;
margin: 0 auto;
padding: 0 1rem;
background-color: #ffffff;
}
.logos-container {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 40px 50px;
padding: 2rem 1rem;
/* --- INITIAL COLLAPSE PROPERTIES (Desktop Default) --- */
/* This sets the initial visible height to show about two rows of logos */
max-height: 180px;
overflow: hidden;
transition: max-height 0.5s ease-in-out;
position: relative;
}
/* Individual logo styling */
.logos-container img {
height: 45px;
width: auto;
max-width: 120px;
/* Added transition for smooth resizing */
transition: height 0.3s ease;
}
/* Hide the checkbox input visually but keep it accessible */
#logo-toggle-input {
display: none;
}
/* ---------------------------------------------------- */
/* CONTROL STYLING (The Button/Label) */
/* ---------------------------------------------------- */
.logos-toggle-label {
display: block;
width: 50px;
margin: 1rem auto 2rem;
padding: 12px 24px;
background-color: #002b56;
border-radius: 50px; /* Fully rounded ends */
color: white;
border: none;
cursor: pointer;
text-align: center;
font-size: 25px;
font-weight: bold;
transition: background-color 0.2s, transform 0.2s;
}
.logos-toggle-label:hover {
background-color: #001f3e;
transform: translateY(-2px);
}
/* Gradient Fade Effect (Visual cue that content is hidden) */
.logos-container::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: linear-gradient(to top, white, rgba(255, 255, 255, 0));
pointer-events: none;
opacity: 1;
transition: opacity 0.5s;
}
/* ---------------------------------------------------- */
/* TOGGLE LOGIC (CSS MAGIC) */
/* ---------------------------------------------------- */
/* When the checkbox is checked: Expand the container */
#logo-toggle-input:checked ~ .logos-container {
/* A large "magic number" to ensure all logos are visible when expanded */
max-height: 2000px;
overflow: visible;
}
/* When the checkbox is checked: Hide the fade gradient */
#logo-toggle-input:checked ~ .logos-container::after {
opacity: 0;
}
/* When the checkbox is checked: Change the label text to "Hide Partners" */
#logo-toggle-input:checked ~ .logos-toggle-label::before {
content: '-';
}
/* Default content for the label when not checked */
.logos-toggle-label::before {
content: '+';
}
/* ---------------------------------------------------- */
/* MOBILE RESPONSIVENESS */
/* ---------------------------------------------------- */
@media (max-width: 768px) {
.logos-container {
/* FIX: Set a smaller initial height for the collapsed view on mobile */
max-height: 160px;
/* Reduce the gap between logos on smaller screens to save space */
gap: 30px 40px;
padding: 1.5rem 1rem;
}
/* NEW: Make the logos themselves smaller on mobile */
.logos-container img {
height: 30px; /* Reduced from 45px */
max-width: 90px;
}
.logos-toggle-label {
width: 80%;
padding: 10px 20px;
font-size: 0.9rem;
}
}
</style>
<!--
====================================================
HTML STRUCTURE (CSS ONLY VERSION)
====================================================
-->
<div class="logos-wrapper">
<!-- 1. The Invisible Checkbox Input that tracks the state (toggled or not) -->
<input type="checkbox" id="logo-toggle-input" role="button" aria-expanded="false">
<!-- 2. The Logo Container holds all the images -->
<div class="logos-container" id="logoContainer">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_17e3853e75cba6111af666af66e856ff74781a9e4.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_19b70734ce810626e5c9af5d7741fdb625d2d2107.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1af1201d3d0d6fd69bf3de5457b3b0a83a3be701b.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1b36e446249eb4114feea8a1f4fda204ea47ebd10.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1ac56691318525fa0d8798429831f4c2ceb7c8cd9.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1ed1f1edf9576bef4627ead6372d3ef2b7ec1d173.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1af82ef6877685660ee05c971ef54f70c2587dc07.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_15544dbdd9471078a77694831cec1c2ed82f18833.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1cc0026902574d3bc3276b1075b67805e197df003.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1dd7c2970f7d354b6e0f12bfd22540d67a8aba519.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1ac85be575407e0e0934803afd17dda3650fe3c81.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1b001579fbcc44b523baec8f2624e4a61cbf39f35.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1269340cca2d302600e167b359b49c156546ecca6.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_150e917d05fef5be7e07b46cb6097eb95aed4f959.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1a8f980a68c49be7e70e79a3c02d1faa695ec443c.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_18e374f58a3bb47a2b647eb42dd5ba18ecf99fd8c.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_142aa114288fa714102870d5ae22116dc1efd8207.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_14596de20add45f969d6927b35e36aa51b0a2a75e.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1b9dbfc145a798afdd89884ef2d24a1458809af89.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_19b671a85ff91bda57acb0f8c5434958870ae8dd1.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_110f4cd6a5711803fce09493262209fbec73ae3ee.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1d53fa9866d54ad7294c6837e0048c7f3f6d38bdb.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_150db0febaff44a37ed79e8ddd2155f1cb9d540fb.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1d5c2eeb31a06795ad6285a38af49c042e4c2888c.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1f93b4cfe8e4e1600ae1e9357517e023c29971fd4.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_16d89024d685e3d4c57b1933a4bf9f66c383e9e0e.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1f2c49d189532fac78d5f11060f3b8304a8ce3c61.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1288c77a1d9e1006b66d96851bdc1d478a63ae2fe.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1bd9d750c889cf4836295b42fcf083c5ac7fdcb06.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_18e1278a28f6fcb7f3a82614521f7849dcafbf401.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1288bbfbd0baf81ca83e7c57bfe3f9f506dbfe411.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1f7b7fa5520c4413cc828c1842be482e86902f772.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_121404aa7b69f6a519c52ac0ff7b6b9a6d3309a7d.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1b85289a06135337b9a1307cc589ba3b102b48741.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1ce4aaf42460ebd3f387e1450697f5d1c6141f6b6.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1ed34eea665ad482a93c9cccea43b692efb03a372.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1888d9842cd786f3f1f209f588891365e304c4698.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_136705039cba6927b8956e9386c51acfa10903213.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_144a9f879380af16b216bf39341910cbd32c593ff.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_19be399cacae868723a743236524f4991f6a0757a.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_18d532c3821e8f803124e1ab5873948364a735851.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1bc38188e14d1b30268b0af6b2a07ddb441569291.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_15daf9f1229fb8d52cf207f7f3cffd8b770ca00ed.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1300f7dae9a88460ad765944449fb548c9ced1be7.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_10289271eb20bb1e5148b5f5a5bccbbf403f7d324.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1b47ff03162ddf133858d3d5fa965ff1ef3bd9b8e.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_189145cffb39ac20c06c7426480a1bd0fd8baca9a.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_12935b8c409daf45f62323a7ddf87694fcdf4aa59.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1936e567e427330ea3b4f5784822d7d711f8cfbda.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1b3cd74aa442d5e3dae308cb6ddc954cf7b3e5880.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_10897eb3f1ee9a52690cfc9090ed674515705b2ba.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1973f62a0b7a9e85ffbe93677abf1cdf11a89da5d.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_193fbae2dd0c9d11559f9c077789ab23ac60faffa.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1a5697d3c8000596e7d155a012615ccc8915a0808.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_175cdf76f0464666eb654927917f3053a2f4f8a76.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1246cdce78986cc4434509ef30f89884043ca036d.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_12c1f850a56cdae2fd6f427a2e21fc8320f37d108.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1c7da6409a5ff4d96b313c6175ec00244caf1a4a4.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1cd1f93d7b8f5cbb73dca1e9c390ecb28de1a3ee4.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_19577de8146446323b176b068b4696209f061b042.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_146651abf5f3f59a308523c1a4ba1c063dbc660ca.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_193997ebb2e6a485af1a3335329d97af834022c5a.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_124158327b7acb28d81c3d7af03b5546895d31225.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_19dc3a76fa30d8716a47d58c44c87da8b5f3d1d41.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_18f02c8bc104067570b7c0fe6e0d9315a53ce14a3.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1c4ff8ac454ed77618cfa37d80bea9579f89937d9.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_19b6fef30e0f409136ea96a0c5dfab3bb3f247858.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_18bf21ebc3391b47b9f350e435cab2891b20dca9c.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_15ab6cf519d931fd86544c1a38e9517ca29f11a2a.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1cb723ef519a2fe08b6d71775bc820d40544d8f9a.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1b4498c2c90b83497ebf31a46bde1285d44cc3894.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1c2a1ef66d0b3d6cdc0065bf52b1fa62b18340213.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_19d45062e0c4d6367563c6b3e373228faca1336e7.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_186dcf583bf7c339c088d11647f86139f0908539c.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1c6421d79c127866064d1bcba3bb8d35440773f89.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1ac093d828115e8d16217ac9f2a25e830ec857c6e.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_183079916e3f888d5e21e2c3144e804483de82b38.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1f7836d1f2c57f5b501a87d5c48bbe3be00a90407.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1d169182a7c264246490e8a21ee1b096714633c94.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_18bf20665da41f60abb66665019f69814e3afd2ac.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1893a26ef7995e326e76ab674d88d202aa27a1d56.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1cb3b1ec9540316478f1ddd787ef536b9748ec5b3.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1828714ac9eb569523fab3fa60d87256073753911.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_1df2cd6420a9c7ed96be363c414cdcaca81c300f1.png">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_18489c5133058252045935efc48d85ba557a1865c.jpg">
<img src="https://www.dkv-mobility.com/content/dam/dkv/assets/logos-fuel-and-charge/media_11cc251d05b52da1aaabd94ac4066aeb8b520c147.png">
</div>
<!-- 3. The Toggle Button (Label linked to the input) is now placed AFTER the container -->
<label for="logo-toggle-input" class="logos-toggle-label"></label>
</div>