1

I have code which when I click on anchor tag then myContent div show and hide. 

      function toggleDiv(divId){
          $("#"+divId).toggle();
      }
 
   .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: dashed 1px;
      border-radius: 50%;
      margin: 1.75em auto 0;
    }
    .circle-container a {
      
      overflow: hidden;
      position: absolute;
      top: 50%; left: 50%;
      width: 4em; height: 4em;
      margin: -2em; /* 2em = 4em/2 */ /* half the width */
    }
    .circle-container img { display: block; width: 100%; }
    .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
    .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
    .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
    .deg180 { transform: translate(-12em); }
    .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
    .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }
    .deg300{ transform: rotate(280deg) translate(12em) rotate(-280deg); }
    /* this is just for showing the angle on hover */
    .circle-container a:not(.center):before {
      position: absolute;
      width: 4em;
      color: white;
      opacity: 0;
      background: rgba(0,0,0,.5);
      font: 1.25em/3.45 Courier, monospace;
      letter-spacing: 2px;
      text-decoration: none;
      text-indent: -2em;
      text-shadow: 0 0 .1em deeppink;
      transition: .7s; /* only works in Firefox */
      content: attr(class)'°';
    }
    .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;
      top: 50%; left: 50%;
      width: 4px; 
      height: 4px;
      border-radius: 50%;
      box-shadow: 0 0 .5em .5em white;
      margin: -2px;
      background: deeppink;
      opacity: .3;
      content: '';
    }
    .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>
<a href="javascript:toggleDiv('myContent');">+</a>
    <div id="myContent" class='circle-container' style="display:none">
      <a href='#' class='center'><img src=''></a>
      <a href='#' class='deg0'><img src=''></a>
      <a href='#' class='deg45'><img src=''></a>
      <a href='#' class='deg135'><img src=''></a>
      <a href='#' class='deg180'><img src=''></a>
      <a href='#' class='deg225'><img src=''></a>
      <a href='#' class='deg315'><img src=''></a>
      <a href='#' class='deg300'><img src=''></a>
    </div>

But when i give css on anchor tag then show hide functionality doesn't work properly.Below is my code

.hr{

      display: block;
      width: 74px;
      height: 34px;
      margin: 40px 0px 0px 0px;
      background: #3e599a;
      text-decoration: none;
      width: 110px;
      font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      color: #FFFFFF;
      position: relative;
      position:fixed;
      top: 40%;
      left: 50%;

  }

<a class="hr" href="javascript:toggleDiv('myContent');">+</a>

Rest is all the same . Neither it is showing and error.

Improve this question

3 Answers 3

Reset to default
2

That is because of the z-index problem, your anchor tag below the toggle div, thats why you cant click the anchor tag when the toggle is displayed

set z-index to .hr This will fix your problem

.hr {
   z-index:99;
}
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

you made my day .thanx a ton . I want to know about it in detail can you please refer some documentation or post so that i can understand the concept.
1

Add z-index to you class="hr"

Here is your working code

$(".hr").click(function (event){
  var divII = "#myContent";
          $(divII).toggle();
      });
.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: dashed 1px;
      border-radius: 50%;
      margin: 1.75em auto 0;
    }
    .circle-container a {
      
      overflow: hidden;
      position: absolute;
      top: 50%; left: 50%;
      width: 4em; height: 4em;
      margin: -2em; /* 2em = 4em/2 */ /* half the width */
    }
    .circle-container img { display: block; width: 100%; }
    .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
    .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
    .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
    .deg180 { transform: translate(-12em); }
    .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
    .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }
    .deg300{ transform: rotate(280deg) translate(12em) rotate(-280deg); }
    /* this is just for showing the angle on hover */
    .circle-container a:not(.center):before {
      position: absolute;
      width: 4em;
      color: white;
      opacity: 0;
      background: rgba(0,0,0,.5);
      font: 1.25em/3.45 Courier, monospace;
      letter-spacing: 2px;
      text-decoration: none;
      text-indent: -2em;
      text-shadow: 0 0 .1em deeppink;
      transition: .7s; /* only works in Firefox */
      content: attr(class)'°';
    }
    .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;
      top: 50%; left: 50%;
      width: 4px; 
      height: 4px;
      border-radius: 50%;
      box-shadow: 0 0 .5em .5em white;
      margin: -2px;
      background: deeppink;
      opacity: .3;
      content: '';
    }
    .circle-container:hover a:after { opacity: 1; }
    .circle-container a:hover:after { opacity: .3; }

.hr{

      display: block;
      width: 74px;
      height: 34px;
      margin: 40px 0px 0px 0px;
      background: #3e599a;
      text-decoration: none;
      width: 110px;
      font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      color: #FFFFFF;
      position: relative;
      position:fixed;
      top: 40%;
      left: 50%;
  z-index:10;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="hr" href="javascript:toggleDiv('myContent');">+</a>
    <div id="myContent" class='circle-container' style="display:none">
      <a href='#' class='center'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
      <a href='#' class='deg0'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
      <a href='#' class='deg45'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
      <a href='#' class='deg135'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
      <a href='#' class='deg180'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
      <a href='#' class='deg225'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
      <a href='#' class='deg315'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
      <a href='#' class='deg300'><img src='http://www.hercampus.com/sites/default/files/2013/02/27/topic-1350661050.jpg'></a>
    </div>

Improve this answer

2 Comments

for your efforts +1
thanx. there's always w3schools for basics but I prefer css-tricks : css-tricks.com/almanac/properties/z/z-index
0

Apply z-index: 1 to .hr, like:

.hr {
  z-index: 1;
}

Have a look at the working snippet below:

function toggleDiv(divId){
          $("#"+divId).toggle();
      }
.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: dashed 1px;
      border-radius: 50%;
      margin: 1.75em auto 0;
    }
    .circle-container a {
      
      overflow: hidden;
      position: absolute;
      top: 50%; left: 50%;
      width: 4em; height: 4em;
      margin: -2em; /* 2em = 4em/2 */ /* half the width */
    }
    .circle-container img { display: block; width: 100%; }
    .deg0 { transform: translate(12em); } /* 12em = half the width of the wrapper */
    .deg45 { transform: rotate(45deg) translate(12em) rotate(-45deg); }
    .deg135 { transform: rotate(135deg) translate(12em) rotate(-135deg); }
    .deg180 { transform: translate(-12em); }
    .deg225 { transform: rotate(225deg) translate(12em) rotate(-225deg); }
    .deg315 { transform: rotate(315deg) translate(12em) rotate(-315deg); }
    .deg300{ transform: rotate(280deg) translate(12em) rotate(-280deg); }
    /* this is just for showing the angle on hover */
    .circle-container a:not(.center):before {
      position: absolute;
      width: 4em;
      color: white;
      opacity: 0;
      background: rgba(0,0,0,.5);
      font: 1.25em/3.45 Courier, monospace;
      letter-spacing: 2px;
      text-decoration: none;
      text-indent: -2em;
      text-shadow: 0 0 .1em deeppink;
      transition: .7s; /* only works in Firefox */
      content: attr(class)'°';
    }
    .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;
      top: 50%; left: 50%;
      width: 4px; 
      height: 4px;
      border-radius: 50%;
      box-shadow: 0 0 .5em .5em white;
      margin: -2px;
      background: deeppink;
      opacity: .3;
      content: '';
    }
    .circle-container:hover a:after { opacity: 1; }
    .circle-container a:hover:after { opacity: .3; }

.hr {
      z-index: 1;
      display: block;
      width: 74px;
      height: 34px;
      margin: 40px 0px 0px 0px;
      background: #3e599a;
      text-decoration: none;
      width: 110px;
      font: 15px/46px"Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
      color: #FFFFFF;
      position: relative;
      position:fixed;
      top: 40%;
      left: 50%;
  }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="hr" href="javascript:toggleDiv('myContent');">+</a>
<div id="myContent" class='circle-container' style="display:none">
  <a href='#' class='center'><img src='http://placehold.it/100x100'></a>
  <a href='#' class='deg0'><img src='http://placehold.it/100x100'></a>
  <a href='#' class='deg45'><img src='http://placehold.it/100x100'></a>
  <a href='#' class='deg135'><img src='http://placehold.it/100x100'></a>
  <a href='#' class='deg180'><img src='http://placehold.it/100x100'></a>
  <a href='#' class='deg225'><img src='http://placehold.it/100x100'></a>
  <a href='#' class='deg315'><img src='http://placehold.it/100x100'></a>
  <a href='#' class='deg300'><img src='http://placehold.it/100x100'></a>
</div>

Hope this helps!

Improve this answer

5 Comments

@smarttechy Can you tell me what is not working in my snippet?
run you snippet and its not showing circles around it have a look .it's after adding -index but codepen.io/smarty_tech/pen/MbZVzN
@smarttechy Use the full screen mode to see the preview of my snippet. Your codepen link is also behaving the same way if you reduce the width of the screen to mobile. Please look properly.
I have said my words after running in full screen mode
@smarttechy If you click the plus button then it will show the circle around it. Maybe I don't understand what you are trying to say. :(

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.