How can I hide/show div or Toggle only with css?

Question

I tried all questions & answers related this topic. Additionally and I tried related questions and try to solve it but not success. So please read my question deathly.

Firstly have a look at the code what I made:

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 150px;
}

<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>
</div>

I want to:

1. Replace all the anchor tag with div only. example:

< a href="#showdiv1" class="clicker" tabindex="1">Click me 1

to:

< div id="#showdiv1" class="clicker" tabindex="1">Click me 1

Reason: why I trying to do this?

I am making a popup like an image given below and for that, I need a way that if I click on SOCIAL then social div appears(hide the manual div) and If I click on MANUAL then manual div appears. (hide the social div)

And when I try to paste the toggle code inside my popup code this is what happens:

see! the popup disappears when I click. that's why I need to remove the anchor tag with div or find any other way to do it.

Popup code:

.modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0,0,0,0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
-transition: opacity 400ms ease-in;
	pointer-events: none;
}

.modalDialog:target {
opacity:1;
pointer-events: auto;
}

.modalDialog > #__spookyPopup {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #fff);
background: -o-linear-gradient(#fff, #999);
}



.profile_container
{				
height:160px;
width:400px;			
background:#ccc;	
display:inline-block;				
}
.profile_div
{
height:120px;
width:130px;	
margin-top:20px;
margin-left:130px;				
background:#ddd;	
border:1px solid grey;
}
.head_div
{
min-height:12px;
width:100%;														
}
				
.media_layer
{
margin-top:20px;
mi-height:12px;
width:400px;			
background:#;	
display:inline-block;				
}
				
				
.manual
{
height:50px;
width:197px;
float:right;				
background:#;
display:inline-block;							
}
.manual:hover
{
border-bottom:2px solid #ab0a72;	
}
.social
{	
height:50px;
width:197px;							
background:#;				
display:inline-block;
				
}
.social:hover
{
border-bottom:2px solid #ab0a72;	
}
				
		
				
		




.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color:#FFF;
}
.clicker.hidden {
  display: none;
}
.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}
.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target ~ div a[href="#showdiv1"],
#showdiv2:target ~ div a[href="#showdiv2"] {
  display: none;
}
#showdiv1:target ~ div a[href="#hidediv1"],
#showdiv2:target ~ div a[href="#hidediv2"] {
  display: inline-block;
}
#showdiv1:target ~ div .hiddendiv.nr1,
#showdiv2:target ~ div .hiddendiv.nr2 {
  height: 150px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
<div id="__spookyPopup">
<a href="#close" title="Close" class="close">X</a>
	<div class="profile_container">
				
		<div class="profile_div"></div>
			</div>
<div class="head_div">
		<p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#8d8686;"><I>Hey, please login to access your private content.</I></p>
</div>
					
<div class="media_layer">
					
	 <div class="social" >
			<p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
	 </div>
							 
<div class="manual">
	 <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">MANUAL</p>
	</div>
							
							
</div>
			
	<div id="showdiv1"></div>
<div id="showdiv2"></div>

<div>
  <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
  <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

  <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
  <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

  <div class="hiddendiv nr1"></div>
  <div class="hiddendiv nr2"></div>

If anyone have an idea how to do it it would be great. Thanks in Advance.

Note: Only pure CSS,CSS3 Use in Answer not use (javascript,jquery) & any other from control

Answer 1

Add the hover state so you keep the popup open when you click inside:

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target,.modalDialog:hover {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>#__spookyPopup {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: -moz-linear-gradient(#fff, #999);
  background: -webkit-linear-gradient(#fff, #fff);
  background: -o-linear-gradient(#fff, #999);
}

.profile_container {
  height: 160px;
  width: 400px;
  background: #ccc;
  display: inline-block;
}

.profile_div {
  height: 120px;
  width: 130px;
  margin-top: 20px;
  margin-left: 130px;
  background: #ddd;
  border: 1px solid grey;
}

.head_div {
  min-height: 12px;
  width: 100%;
}

.media_layer {
  margin-top: 20px;
  min-height: 12px;
  width: 400px;
  background: #;
  display: inline-block;
}

.manual {
  height: 50px;
  width: 197px;
  float: right;
  background: #;
  display: inline-block;
}

.manual:hover {
  border-bottom: 2px solid #ab0a72;
}

.social {
  height: 50px;
  width: 197px;
  background: #;
  display: inline-block;
}

.social:hover {
  border-bottom: 2px solid #ab0a72;
}

.social_link_container {
  height: 160px;
  width: 400px;
  background: #ccc;
  display: inline-block;
}

.fb_container {
  height: 50px;
  width: 340px;
  margin-top: 20px;
  margin-left: 30px;
  background: #ddd;
  border: 1px solid grey;
}

.clicker {
  display: inline-block;
  width: 100px;
  height: 50px;
  background-color: blue;
  color: #FFF;
}

.clicker.hidden {
  display: none;
}

.hiddendiv {
  height: 0px;
  background-color: green;
  overflow: hidden;
  transition: height 0.5s;
}

.hiddendiv.nr2 {
  background-color: red;
}

#showdiv1:target~div a[href="#showdiv1"],
#showdiv2:target~div a[href="#showdiv2"] {
  display: none;
}

#showdiv1:target~div a[href="#hidediv1"],
#showdiv2:target~div a[href="#hidediv2"] {
  display: inline-block;
}

.hiddendiv.nr1 {
 height:150px;
}

#showdiv1:target~div .hiddendiv.nr1,
#showdiv2:target~div .hiddendiv.nr2 {
  height: 150px;
}
#showdiv2:target~div .hiddendiv.nr1 {
  height:0px;
}

<a href="#__spooky_auth_popup">Open Modal</a>

<div id="__spooky_auth_popup" class="modalDialog">
  <div id="__spookyPopup">
    <a href="#close" title="Close" class="close">X</a>



    <div class="profile_container">

      <div class="profile_div"></div>
    </div>
    <div class="head_div">
      <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#8d8686;">
        <I>Hey, please login to access your private content.</I>
      </p>
    </div>


    <div class="media_layer">

      <div class="social">
        <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">SOCIAL</p>
      </div>


      <div class="manual">
        <p style="margin:0;padding:0;text-align:center;
								  font-size:25px;color:#000;line-height:50px;">MANUAL</p>
      </div>


    </div>

    <div id="showdiv1"></div>
    <div id="showdiv2"></div>

    <div>
      <a href="#showdiv1" class="clicker" tabindex="1">Click me 1</a>
      <a href="#hidediv1" class="clicker hidden" tabindex="1">Click me 1</a>

      <a href="#showdiv2" class="clicker" tabindex="2">Click me 2</a>
      <a href="#hidediv2" class="clicker hidden" tabindex="2">Click me 2</a>

      <div class="hiddendiv nr1"></div>
      <div class="hiddendiv nr2"></div>
      </div>