How to make a concentric circle on an existing circle which shows on anchor tag click

Question

I have a small circle on top of which is a "+" button. When clicked, a circle shows up (a dotted one) and the data from my database is shown along its circumference.

Now I want another concentric circle outside of this, and it should also show on the button click, along with the first circle.

function toggleDiv(divId){
    $("#"+divId).toggle();
}

      .post-share{
          display: block;
          width: 74px;
          height: 34px;
          margin: 40px 0px 0px 0px;
          background: #3e599a;
          text-decoration: none;
          width: 110px;
          font: 12px;
          color: #FFFFFF;
          position: relative;
          position:fixed;
          top: 40%;
          left: 50%;
          z-index:99;
          text-align: center;
          vertical-align: middle;
      }
      .post-share span{
          width: 15px;
          height: 18px;
          padding: 3px;
          display: block;
          position: absolute;
          top: -24px;
          right: 0;
          background-color: #080563;
          color: #FFFFFF;
          font-weight: bold;
          vertical-align: middle;
          font: 10px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
          text-align: center;
          text-indent: 0;
    
      }
    
      .social-buttons-text {
        font-size: 4px;
        color: #FFFFFF;
        float: left;
        margin: 0px;
        padding: 0px;
        text-align: left;
      }
      .sphere{
        height: 80px;
        width:80px;
        border-radius: 50%;
      }
    
      /*  for circle */
    
      * {
        padding: 0px;
        margin: 0px;
        transition: 1s;
      }
    
      html {
        background-color: hsla(190, 60%, 50%,1);
        overflow: hidden;
      }
    
      #wrapper {
        margin: 200px auto;
        height: 200px;
        width: 600px;
      }
      .bubble {
        border-radius: 100%;
        height: 40px;
        width: 40px;
        display: inline-block;
        margin: 0px 15px 0px 15px;
      }
    
      .animate {
        animation: scaleWobble 2s infinite alternate ease;
      }
    
      #red {
        background-color: hsla(350, 50%, 50%, 1);
      }
    
      #yellow {
        background-color: hsla(70, 50%, 50%, 1);
      }
    
      #green {
        background-color: hsla(120, 70%, 40%, 1);
      }
    
      @keyframes scaleWobble {
        from {
          height: 100px;
          width: 100px;
        }
        to {
          height: 125px;
          width: 125px;
        }
      }
    
      /**
       * Position icons into circle (SO)
       * http://stackoverflow.com/q/12813573/1397351 
       */
      .circle-container {
        position: relative;
        width: 24em;
        height: 24em;
        padding: 2.8em; /*= 2em * 1.4 (2em = half the width of an img, 1.4 = sqrt(2))*/
        border-radius: 50%;
        margin: 1.75em auto 0;
      }
      .circle-container a {
          position: absolute;
          top: 50%;
          left: 50%;
          width: 4em;
          height: 4em;
          margin: -2em;
      }
      .circle-container img { display: block; width: 100%; }
        .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
        .deg15 { transform: rotate(15deg) translate(12em) rotate(-15deg); }
        .deg30 { transform: rotate(30deg) translate(12em) rotate(-30deg); }
        .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
        .deg60 { transform: rotate(60deg) translate(12em) rotate(-60deg); }
        .deg75 { transform: rotate(75deg) translate(12em) rotate(-75deg); }
        .deg90 { transform: rotate(90deg) translate(12em) rotate(-90deg); }
        .deg105 { transform: rotate(105deg) translate(12em) rotate(-105deg); }
        .deg120 { transform: rotate(120deg) translate(12em) rotate(-120deg); }
        .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
        .deg150 { transform: rotate(150deg) translate(12em) rotate(-150deg); }
        .deg165 { transform: rotate(165deg) translate(12em) rotate(-165deg); }
        .deg180 { transform: translate(-12em); }
        .deg195 { transform: rotate(195deg) translate(12em) rotate(-195deg); }
        .deg210 { transform: rotate(210deg) translate(12em) rotate(-210deg); }
        .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
        .deg240 { transform: rotate(240deg) translate(12em) rotate(-240deg); }
        .deg255 { transform: rotate(255deg) translate(12em) rotate(-255deg); }
        .deg270 { transform: rotate(270deg) translate(12em) rotate(-270deg); }
        .deg285 { transform: rotate(285deg) translate(12em) rotate(-285deg); }
        .deg300{ transform: rotate(300deg) translate(12em) rotate(-300deg); }
      /* this is just for showing the angle on hover */
      .circle-container a:not(.center)::before {
          position: absolute;
          width: 7em;
          color: white;
          opacity: 0;
    }
      .circle-container a:hover:before { opacity: 1; }
    
      /* this is for showing the circle on which the images are placed */
      .circle-container:after {
        position: absolute;
        top: 2.8em; left: 2.8em;
        width: 24em; height: 24em;
        border: dashed 1px deeppink;
        border-radius: 50%;
        opacity: .3;
        pointer-events: none;
        content: ''; 
      }
      .circle-container:hover:after{
          opacity: 1; 
      }
    
      .circle-container a:not(.center)::after {
          position: absolute;
          left: 50%;
          box-shadow: 0 0 .5em .5em white;
          margin: -2px;
          background: #fffea1;
          content: attr(myattri);
    }
    
      .circle-container:hover a:after { opacity: 1; }
      .circle-container a:hover:after { opacity: .3; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="post-share sphere yellow" id="name">erwerew
      <span><a href="javascript:toggleDiv('myContent');">+</a></span>
    </span>  
    
    <div id="myContent" class='circle-container' style="display:none">
    </div>

Kind of confusing to image the actual flow without the actual Front-End.Put the Js/html/Css part on codepen if you can. You can use jquery' onclick event to make an action and .hide()/.show() to display your circles. — Technologeek, Dec 19 '16 at 06:27
Looking for something like this ? http://codepen.io/anon/pen/YpBVpg — Technologeek, Dec 19 '16 at 07:38

score 0 · Answer 1 · answered Dec 19 '16 at 08:20

This may not be 100% the answer you are looking for, but it seems whatever you are doing, you may be making it more complicated then it needs to be.

You can create these circles by using a div with a border-radius:50%;

See this example which i think is acheving what you want with a lot less code.

JsFiddle Demo: https://jsfiddle.net/yfpnbf4z/3/

$("#circleToggle").click(function() {
  $("#circle1").fadeToggle("slow");
  $("#circle2").fadeToggle("slow");
  if ($("#circle1").is(":hidden")) {
    $("#circleToggle").html("+");
  } else {
    $("#circleToggle").html("-");
  }
});

.container {
  background: #333;
  position: relative;
  height: 500px;
  width: 500px;
}
.button {
  position: absolute;
  left: 230px;
  top: 5px;
  width: 40px;
  height: 40px;
  line-height: 40px;
  font-size: 20px;
  background: #fff;
  display: inline-block;
  border-radius: 50%;
  text-align: center;
}
.circle {
  border-radius: 50%;
  border: 1px dashed red;
  display: none;
}
#circle1 {
  position: absolute;
  top: 150px;
  left: 150px;
  height: 200px;
  width: 200px;
  line-height: 200px;
  text-align: center;
  color: #fff;
}
#circle2 {
  position: absolute;
  top: 50px;
  left: 50px;
  height: 400px;
  width: 400px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<div class="container">
  <div class="button" id="circleToggle">+</div>
  <div class="circle" id="circle1">Some data</div>
  <div class="circle" id="circle2"></div>
</div>

I hope this is useful to you mate.

How to make a concentric circle on an existing circle which shows on anchor tag click

1 Answers1