title: Make a div slide out from button on hover
body: <p>I'm currently learning some jQuery, and I've created a button that when clicked, toggles this div containing colored buttons:</p>
  
  <p><a href="https://i.stack.imgur.com/VNxym.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VNxym.png" alt="enter image description here"></a></p>
  
  <p>When these colored buttons are pressed, the main (white button) changes color according to the color pressed. However, is there a way I can have this div of colored buttons slide out from the button div (say, to the right), on mouse hover where they can be selected? </p>
  
  <p>here's the jQuery I have so far: </p>
  
  <pre><code>//When clicking diff colours
  $("ul").on("click", "li", function() {
    $('button').removeClass().addClass(this.className);
  });
  
  //When white button is pressed
  $("#revealColorSelect").click(function(){
    //Show color select or hide the color select
    changeColor();
    $("#colorSelect").toggle();
  });
  
  //update the new colour
  function changeColor() {
    var p = $("#pink").val();
    var pur = $("#purple").val();
    var r = $("#red").val();
    var b = $("#blue").val();
    var g = $("#green").val();
    var o = $("#orange").val();
  };
  </code></pre>