JSFiddle - React, Tailwind, and code Playground

by rohanbhangui

HTML

<!DOCTYPE html>

<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Mind Map</title>

  <link rel="stylesheet" href="01.css" type="text/css" />

  <script src="jquery.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script> 

</head>
<body>
  <div class="container">
    <a id="show" href="#">Rohan</a>
  
    <div class="categories">
      <a href="#" id="facebook">Facebook</a>
      <a href="#" id="interests">Interests</a>
      <a href="#" id="pages">Pages</a>
      <a href="#" id="about">About</a>
    </div>
  </div>
  <button id="button">click me</button>
</body>
</html>

CSS

#facebook{
  top:8px;
  left:370px;
  position: absolute;
}

#show{
  margin-left: 40%;
}

ul{
    list-style-type: none;
}

.hidden{
  display: none;
}

body {
    background-color: #ccc;
}

.highlight{
  background-color: #ff0000;
}

a {
  color:#fff;
  font-family: Arial, "MS Trebuchet", sans-serif;
  text-decoration: none;
  background:#3399ff;
  border: 2px solid white;
  -webkit-border-top-left-radius: 20px;
  -webkit-border-bottom-right-radius: 20px;
  -moz-border-radius-topleft: 20px;
  -moz-border-radius-bottomright: 20px;
  border-top-left-radius: 20px;
  border-bottom-right-radius: 20px;
  padding: 7px 7px 7px 7px;
  border: 5px 5px 5px 5px;
  word-spacing:5px;
  vertical-align: 50px;
}

JavaScript

$(document).ready(function () {
    $("#facebook").hide();



    $("#button").click(function ($event) {
        var dist = 30;
        var angle = 48;
        var x = Math.cos(angle*Math.PI/180) * dist;
        var y = Math.sin(angle*Math.PI/180) * dist;
        $("a#facebook").animate({opacity: "toggle", 'left': '+='+x+'px', 'top': '+='+y+'px'}, 1000);      
    },
        var dist = 30;
        var angle = 48;
        var x = Math.cos(angle*Math.PI/180) * dist;
        var y = Math.sin(angle*Math.PI/180) * dist;
        $("a#facebook").animate({opacity: "toggle", 'left': '-='+x+'px', 'top': '-='+y+'px'}, 1000);
    );
});