How to create a toggle without JS?

Hi there!

I am creating a toggle in pure css without jquery or javascript and its look like it hasn’t work yet. The problem is Css div alignment. Its not perfectly aligned.
Here is what I am trying to achieve: https://ibb.co/dsYS0J && https://ibb.co/gcOo7y

CSS:

	             .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;	
				}
				
				.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;
				}
				
				
				.collapse > a{
				  background: #cdf;
				  cursor: pointer;
				  
				  display: inline-block;
				}
				.collapse:focus{
				  outline: none;
				}
				.collapse > div{
				  display: none;
				}
				.collapse:focus div{ float:right;
				  display: inline-block; 
				}

HTML:

<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 collapse" tabindex="1">
							 <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 class="collapse"  style="float:right;" tabindex="1">
					  <a>Collapse 1</a>
					 <div class="social_link_container"  style="float:left;">Content internal 1....</div>
					</div>

					<div class="collapse" style="float:left;" tabindex="1">
					  <a>Collapse 2</a>
					  <div  class="social_link_container" >Content internal 2....</div>
					</div>
					
					</div>
</div>

HERE IS DEMO:
https://jsfiddle.net/navjot789/2fcLvmrj/
and its seems like its not working as I want. If anyone who have a deep knowledge is css helps thats would be a great.
any input is apprecheated.

I didn’t see any ‘toggle’ in your code but there does seem to be a ‘modal’. Unless you meant you wanted to toggle a modal. (A toggle is usually an on/off switch much like the one in the middle of your screenshot which is why I was confused).

Your modal seems to be working and just needs some styling so you may need to be more specific about what you need to change. I do see that you have not cleared your floats and you are adding a bottom border to your text on hover which causes a reflow and should be avoided.

I don’t see anything here that needs more than basic css skills so it may be an exercise for you to work your way through by yourself. If you can point to an element that you are having trouble styling or moving then we can give you some pointers :slight_smile:

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.