Hide/close container using uk-close button

Question

Is it possible to close the container using uk-close button? I find examples to close alerts and dialogs but how to close/hide containers?

<div class="uk-container uk-position-center">
  <div class="uk-width-xxlarge uk-height-large uk-card uk-card-body uk-card-default ">

    <button class="uk-close-large" type="button" uk-close></button>
      testing testing testing testing testing testing testing testing testing testing testing testing testing testing tetesting testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing testing sting testing testing testing testing testing

  </div>
</div>

Answer 1

uk-close is only available for Modals, but you can still use uk-toggle to open/close any element you want. You need to assign ID to your container and then you can toggle it with uk-toggle="target: #id" as shown in the example. This may not to be the best solution as it requires adding container ID and uk-toggle, so maybe a custom event listener for that button would be better.

<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css" />

<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js"></script>

<div class="uk-container uk-position-center" id="toggled-container">
    <div class="uk-width-xxlarge uk-card uk-card-body uk-card-default">
      <button class="uk-close-large uk-align-right" type="button" uk-close uk-toggle="target: #toggled-container"></button>
      <p>testing testing testing testing testing testing testing testing testing testing testing testing testing testing tetesting testing testing testing testing testing testing testing testing testing testing testing testing</p>
    </div>
</div>