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">
    <div class="main">
    <ul>
      <li id="show"><a href="#">Rohan</a>
    
        <ul id="categories">
          <li><a href="#">Facebook</a></li>
          <li><a href="#">Interests</a></li>
          <li><a href="#">Pages</a></li>
          <li><a href="#">About</a></li>
          <li><a href="#">Places</a></li>
          <li><a href="#">Variables</a></li>
        </ul>
      </li>
    </ul>
  </div>
  </div>
</body>
</html>

CSS

#categories{
  position: relative;
  width: 700px;
  margin: 0 auto;
}

#categories li {
  top: 16px;
  position: absolute;
  text-decoration: none;
}

#show {
  left: 50%;
  position: relative;
}

ul{
    list-style-type: none;
  text-decoration: none;
}

.container{
  border: 2px solid white;
}

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 () {
    
    
    /*CSS ISNT IMPROTANT NOR HTML*/
    
    
    
    
    
    
    $("ul#categories>li").hide();

    //select all targets
    var targets = $("ul#categories>li");
    ///gives starting and ending position of li elements
    var start_position = $("#show").position();
    console.log(start_position.top + " " + start_position.left);


    //this function will set the position for the targets
    $(targets).each(function(){
        $(this).css("top", start_position.top + "px");
        $(this).css("left", start_position.left + "px");
        console.log((targets).position());
    });









    $("#show").click(function () {
        


    });
});