Prismjs
Dual Listboxes-html
<div class="container-fluid">
<div class="row">
<div class="col-md-6">
<div class="card">
<div class="card-header code-header" data-bs-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
<h5>Select by class</h5>
<i class="ti ti-code source" data-source="dlb1"&l></i>
</div>
<div class="card-body">
<select class="select1" multiple>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</div>
</div>
</div>
</div>
</div>
Dual Listboxes-css
.dual-listbox .dual-listbox__button {
border-radius: 5px;
background-color: rgba(var(--primary), 0.9);
padding: 7px 12px;
}
.dual-listbox .dual-listbox__button:hover {
background-color: rgba(var(--primary), 1);
transition: all 0.3s ease;
}
.dual-listbox .dual-listbox__item.dual-listbox__item--selected {
background-color: rgba(var(--primary), 0.1);
color: rgba(var(--primary), 1);
}
Dual Listboxes-scss
.dual-listbox {
width: 100%;
.dual-listbox__container{
display: flex;
align-items: center;
justify-content: space-between;
flex-wrap: unset;
}
.dual-listbox__search{
color: rgba(var(--secondary), 1);
padding: 0.4rem 0.75rem;
border: 1px solid var(--border_color);
border-radius: 0.3rem;
&:focus{
color: rgba(var(--dark), 1);
box-shadow: 0 0 0 0.25rem rgba(var(--primary), 0.3);
border: 1px solid rgba(var(--primary), 1);
outline: none;
}
}
}
.dual-listbox .dual-listbox__title {
font-weight: 600;
color: rgba(var(--dark), 0.60);
padding: 0.6rem 1rem;
border-radius: 0.3rem 0.3rem 0 0;
border-color: rgba(var(--dark), 0.20);
}
.dual-listbox .dual-listbox__available, .dual-listbox .dual-listbox__selected{
border-radius: 0 0 0.3rem 0.3rem;
border: 1px solid rgba(var(--dark), 0.20);
}
Dual Listboxes-javascript
var dlb4 = new DualListbox(".select4", {
showSortButtons: true,
});
var sources = document.querySelectorAll(".source");
for (var i = 0; i < sources.length; i++) {
var source = sources[i];
source.addEventListener("click", function(event) {
var code = document.querySelector("." + event.currentTarget.dataset.source);
code.classList.toggle("open");
});
}