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

//initial variable declaration. you can put these inside a
//closure or namespace if you prefer.

//reference to targets
var targets = $('.categories a'),
    //number of targets
    length = targets.length,
    //animation state
    is_animating = false,
    //whether we're expanding or contracting
    is_expanding = false,
    //distance
    distance = 240,
    //constant, based on number of targets
    angle_const = 180 / length,
    //starting angle
    angle_start = angle_const * .5;

//run through each element and store original coordinates,
//then hide them
targets.each(function ( ) {
    var element = $(this),
        offset = element.offset();
  
    element.data('previous_position', {
        x : offset.left,
        y : offset.top        
    });
}).hide();

//bind the click event to the show div
$('#show').on('click.mynamespace', function ( ) {
    //if we're already animating, do nothing
    if ( is_animating ) {
        return;        
    }
    //else, toggle the animation state to animating
    toggle_animation_state();
    //loop over the targets
    targets.each(function ( i ) {
        //determine the constant to multiply by,
        //based on animation state
        var state = ( is_expanding ) ? 1 : -1,
            //set the resolved angle for this target
           angle = ( i + (1 * state) ) * angle_const - angle_start,
            //determine x from angle
           x = Math.cos(angle * Math.PI / 180) * distance,
            //determine y from angle
           y = Math.sin(angle * Math.PI / 180) * distance;
        
        //call the function for actually starting the animation
       set_position($(this), x, y, i * 750);
    });
});

//function to toggle whether we're animating,
//and whether we're expanding on this animation cycle or not
function toggle_animation_state ( ) {
    is_animating = ! is_animating;
    if ( is_animating ) {
        is_expanding = ! is_expanding;
    }        
}

//once we're done contracting, call this...