The mod.team_switcher() method automatically attaches event listeners for all <div class="mod-team-switcher"></div> tags on the page and handles interaction events for the elements.
Method API
// Using mod(-plus).iife.min.js
window.mod.team_switcher();
// Using mod(-plus).esm.min.js
import { team_switcher } from 'path/to/mod(-plus).esm.min.js';
team_switcher();Usage Examples
Use the following usage examples to guide your implementation.
Examples Use Global JavaScript
For simplicity, all usage examples demonstrate usage with Mod's global JavaScript library (mod(-plus).iife.min.js). All documented behavior is identical in the ESM variant of Mod's JavaScript library.
Team Switcher HTML
<div class="mod-team-switcher">
<div class="mod-team-switcher-current">
<div class="mod-team-switcher-avatar">
<img src="/team_avatar_1.webp" alt="Team 1" />
</div>
<div class="mod-team-switcher-metadata">
<h2>Fishly</h2>
<p>Organization</p>
</div>
<i class="mod-icon-chevrons-up-down"></i>
</div>
<div class="mod-team-switcher-dropdown">
<ul>
<li>
<div class="mod-team-switcher-avatar">
<img src="/team_avatar_2.webp" alt="Team 2" />
</div>
<div class="mod-team-switcher-metadata">
<h2>Puply</h2>
<p>Organization</p>
</div>
</li>
<!-- Rest of list items... -->
</ul>
<footer class="mod-team-switcher-dropdown-footer">
<button class="mod-button mod-button-block mod-button-brand">Add a New Team</button>
</footer>
</div>
</div>Team Switcher JavaScript
window.mod.team_switcher();