Button

Button.markdown

Button

Click on the button to trigger a list. You can add links or info into this pen.

A Pen by anna on CodePen.

License.

index.html

<button>Click Here</button>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>

script.js

$(document).ready(function() {
  $("button").on("click", function() {
    console.log($("button"));

    $("ul").animate({
      width: ["toggle", "easeOutBounce"],
      height: ["toggle", "easeOutBounce"],
      opacity: "toggle"
   
    }, 1000, "linear", function() {
      
    });

  });

});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

style.css

button {
  background-color:red;
  color:white;
  padding: 20px;
}

ul {
  display: none;
}