This package has been deprecated in favor of better-nice-select. Please consider migrating to better-nice-select for continued support and updates: https://www.npmjs.com/package/better-nice-select

Animation

Use the animation option via JavaScript to decide wether the methods

.bootstrapNiceSelect('open')
.bootstrapNiceSelect('close')
.bootstrapNiceSelect('hide')
.bootstrapNiceSelect('show')

from the API or the animation for the popup modal does exist or not. Via data attributes, the option is called data-animation.

Possible options to search for are: Banana, Apple, Orange, Lemon, Pepper, Mushrooms, Cabbages, Celery, Brocoli, Garlic

<div class="container">
    <div class="d-flex justify-content-start align-items-center m-4">
        <button type="button" class="btn btn-outline-primary me-2" id="select-animation-hide">Hide</button>
        <button type="button" class="btn btn-outline-primary ms-2" id="select-animation-show">Show</button>
    </div>
    <select multiple="multiple" id="select-animation">
        <option value="Banana">Banana</option>
        <option value="Apple">Apple</option>
        <option value="Orange">Orange</option>
        <option value="Lemon" selected="selected">Lemon</option>
        <option value="Pepper">Pepper</option>
        <option value="Mushrooms">Mushrooms</option>
        <option value="Cabbages">Cabbages</option>
        <option value="Celery">Celery</option>
        <option value="Garlic">Garlic</option>
        <option value="Brocoli">Brocoli</option>
    </select>
</div>

let select = bootstrapNiceSelect.BootstrapNiceSelect("#select-animation", { animation: false });

document.querySelector("#select-animation-hide").addEventListener("click", function () {
    select.bootstrapNiceSelect("hide");
});

document.querySelector("#select-animation-show").addEventListener("click", function () {
    select.bootstrapNiceSelect("show");
});