Switcher

by Greggg

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/js/uikit.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/uikit/2.24.2/css/uikit.min.css">
<button class="uk-button tab1">
  tab 1
</button>
<button class="uk-button tab2">
  tab 2
</button>
<div class="wrapper">
  <div class="palette panel1 active">
     <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(97,189,109)" class="uk-select-color" style="background: rgb(97,189,109);"></span>
                                        <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(26,188,156)" class="uk-select-color" style="background: rgb(26,188,156);"></span>
                                        <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(84,172,210)" class="uk-select-color" style="background: rgb(84,172,210);"></span>
                                        <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(44,130,201)" class="uk-select-color" style="background: rgb(44,130,201);"></span>
                                        <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(147,101,184)" class="uk-select-color" style="background: rgb(147,101,184);"></span>
                                        <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(71,85,119)" class="uk-select-color" style="background: rgb(71,85,119);"></span>
                                        <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(204,204,204)" class="uk-select-color" style="background: rgb(204,204,204);"></span><br>
                                        <span data-wysihtml5-command="foreColorStyle" data-wysihtml5-command-value="rgb(65,168,95)" class="uk-select-color" style="background: rgb(65,168,95);"></span>
                                        <span...

CSS

.wrapper {
  position relative
}

.palette {
  background-color: #CCC;
  padding:10px;
  position: absolute;
  -webkit-animation-name: myanim;
  -webkit-animation-duration: .4s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  opacity:1;
}

.palette:not(.active) {
  -webkit-animation-name: myanimreverse;
  -webkit-animation-duration: .4s;
  -webkit-animation-timing-function: ease-out;
  -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
  opacity:0;
}

@-webkit-keyframes myanim {
  0% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
  100% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
}

@-webkit-keyframes myanimreverse {
  0% {
    opacity: 1;
    -webkit-transform: scale(1);
  }
  100% {
    opacity: 0;
    -webkit-transform: scale(0);
  }
}
.palette > * {
  display: inline-block;
  width: 32px;
  height: 32px;
  position: relative;
  z-index: 1;
}

JavaScript

$('.uk-button').click(function() {
  $('.palette').toggleClass('active');
});