<style>.container{width:100%;max-width:600px;padding:20px;box-sizing:border-box;margin:0 auto;font-family:Arial,sans-serif}.dropdown-label{display:block;margin-bottom:8px;font-weight:600}.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;border:0;clip:rect(0 0 0 0)}select{width:100%;padding:12px 14px;font-size:16px;border-radius:6px;border:1px solid #ccc;background-color:#fff;cursor:pointer}select:focus{outline:3px solid #005fcc;outline-offset:2px}.login-box{margin-top:20px;padding:16px;border-radius:8px;background-color:#fff;border:1px solid #e0e0e0;box-shadow:0 4px 10px rgb(0 0 0 / .04);display:none;width:100%;box-sizing:border-box}.login-box p{margin:0;font-size:15px;color:#333}.login-box a{color:#005fcc;text-decoration:underline;font-weight:500}.login-box a:focus{outline:3px solid #005fcc;outline-offset:2px}@media (max-width:480px){.container{max-width:90%}}</style>
<div class="container"><label for="companyDropdown" class="dropdown-label"> Welk bedrijf hebt u eerder gebruikt? </label><select id="companyDropdown" aria-describedby="dropdownHelp"><option value="">Selecteer een bedrijf</option><option value="frigo">Frigo-Trans</option><option value="accuristix">Accuristix</option><option value="atshealthcare">ATS Healthcare</option><option value="boyle">Boyle Transportation</option><option value="skelton">Skelton Truck Lines</option></select><p id="dropdownHelp" class="visually-hidden"> Nadat u een bedrijf hebt geselecteerd, verschijnt hieronder een inloglink. </p><div id="loginBox" class="login-box" role="region" aria-live="polite" aria-hidden="true"><div class="login-message" data-company="frigo" hidden><p> Log <a href="https://booking.frigo-trans.de/" target="_blank" rel="noopener noreferrer"> hier </a> in om uw <strong>Frigo-Trans</strong>-account te beheren. </p></div><div class="login-message" data-company="accuristix" hidden><p> Log <a href="https://www.accuristix.com/client-login" target="_blank" rel="noopener noreferrer"> hier </a> in om uw <strong>Accuristix</strong>-account te beheren. </p></div><div class="login-message" data-company="atshealthcare" hidden><p> Log <a href="https://www.atshealthcare.ca/Login?ReturnUrl=%2fprotected%2fATSTrack.aspx" target="_blank" rel="noopener noreferrer"> hier </a> in om uw <strong>ATS Healthcare</strong>-account te beheren. </p></div><div class="login-message" data-company="boyle" hidden><p> Log <a href="https://spy.boyletransport.com/#/login" target="_blank" rel="noopener noreferrer"> hier </a> in om uw <strong>Boyle Transportation</strong>-account te beheren. </p></div><div class="login-message" data-company="skelton" hidden><p> Log <a href="http://portal.skeltontruck.com/login.msw" target="_blank" rel="noopener noreferrer"> hier </a> in om uw <strong>Skelton Truck Lines</strong>-account te beheren. </p></div></div></div>
<script>const dropdown=document.getElementById("companyDropdown");const loginBox=document.getElementById("loginBox");const messages=document.querySelectorAll(".login-message");dropdown.addEventListener("change",function(){const selectedCompany=this.value;messages.forEach(msg=>msg.hidden=!0);if(selectedCompany===""){loginBox.style.display="none";loginBox.setAttribute("aria-hidden","true");return}
const activeMessage=document.querySelector(`.login-message[data-company="${selectedCompany}"]`);if(activeMessage){activeMessage.hidden=!1}
loginBox.style.display="block";loginBox.setAttribute("aria-hidden","false")})</script>
