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="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.js"></script>
  <script src="mindmap.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>
      <a href="#" id="places">Places</a>
    </div>
  </div>
  <button id="buttonoff">reverse</button>
</body>
</html>

CSS

a#facebook{
  top: 0px;
  left: 495px;
  position: absolute;
}

a#interests{
  top: 0px;
  left: 500px;
  position: absolute;
}

a#about{
  top: 0px;
  left: 510px;
  position: absolute;
}

a#pages{
  top: 0px;
  left: 510px;
  position: absolute;
}

a#places{
  top: 0px;
  left: 510px;
  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

$("#facebook").hide();
$("#interests").hide();
$("#about").hide();
$("#pages").hide();
$("#places").hide();



$("#show").click(function($event) {
    var numCategories = $(".categories>a").size(); //determines the number of elements in the categories div
    console.log(numCategories + " elements"); //prints out numCategories value
    var dist = 240; //defines distance the object should move from its origin
    var angleStart = (180 / numCategories) / 2; //angle start ensures an even distribution. divided by two to provide "padding"
    var angle = 180 / numCategories - angleStart; //calculates angle for first element minue the angleStart
    console.log("position 1: " + angle); // prints out angle for the first element
    var x = Math.cos(angle * Math.PI / 180) * dist; // using cosine to determine top + left properties
    var y = Math.sin(angle * Math.PI / 180) * dist; // using cosine to determine top + left properties
    $("a#facebook").animate({
        opacity: "toggle",
        'left': '+=' + x + 'px',
        'top': '+=' + y + 'px'
    }, 750, //sets opacity to visible, and
    //changes the value of top and left properties
    //chained functions for other elements in the categories div


    function() {
        angle = (numCategories - 3) * (180 / numCategories) - angleStart;
        console.log("position 2: " + angle);
        x = Math.cos(angle * Math.PI / 180) * dist;
        y = Math.sin(angle * Math.PI / 180) * dist;
        $("a#interests").animate({
            opacity: "toggle",
            'left': '+=' + x + 'px',
            'top': '+=' + y + 'px'
        }, 750,

        function() {
            angle = (numCategories - 2) * (180 / numCategories) - angleStart;
            console.log("position 3: " + angle);
            x = Math.cos(angle * Math.PI / 180) * dist;
            y = Math.sin(angle * Math.PI / 180) * dist;
            $("a#pages").animate({
                opacity: "toggle",
                'left': '+=' + x + 'px',
           ...