hide a dismissible alert in bootstrap

Question

Can I tell a dismissable alert to only hide, not remove itself from the dom when dismissed?

<div class="alert alert-success alert-dismissible fade in" role="alert" if.bind="message">
    <button type="button" class="close" data-dismiss="alert" aria-label="Close">
        <span aria-hidden="true">&times;</span>
    </button>
    <strong>Success!</strong> ${message}
</div>

The problem is I'm not using jQuery for anything now-a-days. I need aurelia to just show/hide it based on the flag or existance of a message.

It works once, but as soon as I dismiss it, then it is removed from the DOM so new messages don't appear after that.

Answer 1

Besides the if.bind, there's also a show.bind (manual) or you can bind to the default hidden attribute using hidden.bind.

Like Matt stated, you can also use string interpolation to add a CSS class manually ${!message ? 'hidden': ''}