We Keep Coding

How to Make Responsive Font Awesome Icon Retain its Dimensions? [duplicate]

This question already has answers here:
How to scale a div without scaling content
(3 answers)
Closed 2 years ago.
I have a div that expands on click to 1.3 width and 1.02 height, but I want the responsive icon inside it to retain its dimensions. Currently the icon becomes stretched and elongated to match the dimensions of its container div. I want it to grow but not lose its original dimensions.
$(document).ready(function(){
$(".ico").click(function(){
$(".active").removeClass("active");
$(this).addClass("active");
});
});
.bar {
display: inline-block;
font-size: 3vw;
width: 7%;
}
.ico {
background-color: #f8f8ff;
line-height: 1.5;
border-style: solid;
text-align: center;
border-width: 2px;
border-color: #aeaf9d;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.active{
transform-origin: left;
transform: scale(1.3, 1.02);
transition: 50ms;
box-shadow: 2px 2px 10px -1px rgba(0,0,0,.3);
z-index: 10;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
<div class="ico">
<div class="twitter">
<i style="color:#1DA1F2;" class="fab fa-twitter"></i>
</div>
</div>
<div class="ico">
<div class="youtube">
<i style="color:#FF0000;" class="fab fa-youtube"></i>
</div>
</div>
</div>

Apply the opposite scaling to the icon
$(document).ready(function() {
$(".ico").click(function() {
$(".active").removeClass("active");
$(this).addClass("active");
});
});
.bar {
display: inline-block;
font-size: 3vw;
width: 7%;
}
.ico {
background-color: #f8f8ff;
line-height: 1.5;
border-style: solid;
text-align: center;
border-width: 2px;
border-color: #aeaf9d;
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.active {
transform-origin: left;
transform: scale(1.3, 1.02);
transition: 50ms;
box-shadow: 2px 2px 10px -1px rgba(0, 0, 0, .3);
z-index: 10;
}
.active i {
transform: scale(calc(1/1.3), calc(1/1.02));
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="bar">
<div class="ico">
<div class="twitter">
<i style="color:#1DA1F2;" class="fab fa-twitter"></i>
</div>
</div>
<div class="ico">
<div class="youtube">
<i style="color:#FF0000;" class="fab fa-youtube"></i>
</div>
</div>
</div>

Fixed Headers and Section Anchors with bootstrap

I swear I have tried everything that I can think of to solve this issue. I have a fixed bootstrap navbar, using a javascript onscroll event listener to apply the fixed attribute...I tried using style in the markup, but it did not have the desired effect. So of course this is a repetitive issue, but I have tried all the recommendations and then some. At least all that I could find. The problem is that when I use any #about internal link, the content falls beneath the navbar. I have tried margins, absolute, relative, top -...px on .section2. None of it worked.
And please I am new to this, so any solutions, please make it specific to my code and not just add a position to the anchor. Give me the exact class/id and what to add, or remove, or both.
here is a link to the live page to see what happens when you click any link for #about section: portfolio #about
https://kingdomb.github.io/live_portfolio/#about
NOTE: The code below does not give display the error properly so use the link above.
UPDATE: 3/22 02:16
I managed to find this:
Come on guys!
This have a very simple solution, create your ancho like this:
<div style="margin: -50px 0px 50px 0px; position: absolute;">
<a id="myanchor"></a>
</div>
With -50px margin what i make is upper the anchor div, and with 50px margin, i push down the next content. You only have to make your test with your custom margins.
Works like a charm. I use this trick in all one page design websites.
BUT, now one click on the about link in the navbar to #myanchor gives me this:
And if I click the exact same navbar link I get a minor adjustment to this:
THANKS!!!
// When the user scrolls the page, execute myFunction
window.onscroll = function() {
myFunction();
myFunction2();
};
// Get the navbar
var navbar = document.getElementById("navbar");
// Get the offset position of the navbar
var sticky = navbar.offsetTop;
// Add the sticky class to the navbar when you reach its scroll
position.Remove "sticky"
when you leave the scroll position
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky");
} else {
navbar.classList.remove("sticky");
}
}
// Get the logo
var logo = document.getElementById("logo");
// Get the offset position of the logo
var logoSpin = logo.offsetTop;
// Add the logo-spin class to the navbar when you reach its scroll
position.Remove "logo-spin"
when you leave the scroll position
function myFunction2() {
if (window.pageYOffset >= logoSpin) {
logo.classList.add("logo-spin");
} else {
logo.classList.remove("logo-spin");
}
}
// All links will have a target:__blank for external page linking
// Read more: https://html.com/attributes/a-target/#ixzz6GMsDfQEr
// jQuery(document.links)
// .filter(function() {
// return this.hostname != window.location.hostname;
// })
// .attr("target", "_blank");
//OR Read more: https://html.com/attributes/a-target/#ixzz6GN6pd1Qt
function externalLinks() {
for (var c = document.getElementsByTagName("a"), a = 0; a <
c.length; a++) {
var b = c[a];
b.getAttribute("href") &&
b.hostname !== location.hostname &&
(b.target = "_blank");
}
}
externalLinks();
html,
body {
background-color: #E3E3E3;
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
/* HOME */
.section1 {
background: url("../images/laptop-table1920-gray.jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
background-attachment: scroll;
width: 100%;
height: 100%;
}
.section1 .container {
background-color: rgb(0, 0, 0, 0.65);
min-height: -webkit-fill-available;
min-width: -webkit-fill-available;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
}
.home-btn {
background-color: transparent;
font-weight: 500;
border-color: #8e0000;
border-radius: 3px;
color: #8e0000;
margin-top: 35px;
font-size: 1.12em;
transform: translate(-50%, -50%);
position: absolute;
text-shadow: .1px .8px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
/* hover styling required !important */
.home-btn:hover {
color: #8e0000 !important;
border-color: #8e0000;
font-size: 1.4em;
border-width: 3px;
font-weight: 600;
text-shadow: .1px 2px 1px black;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.intro {
color: white;
font-size: 2.74em;
text-shadow: .1px .8px 1px black;
}
.highlight {
color: #8e0000;
text-shadow: .1px .8px 1px black;
}
/* NAVIGATION */
.logo {
display: inline-flex;
flex-direction: row;
-webkit-filter: drop-shadow(0px 3px 10px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.navbar-brand {
margin: 0px;
padding: 0px 0px !important;
}
.logo-wrapper {
color: white;
font-size: 1.4em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 2px 1px black;
}
.logo-spin {
-webkit-animation: spin 1s;
animation: spin 3s;
animation-iteration-count: 1;
}
#-webkit-keyframes spin {
0% {
-webkit-transform: rotateY(360deg);
}
100% {
-webkit-transform: rotateY(-360deg);
}
}
#keyframes spin {
from {
-moz-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
}
to {
-moz-transform: rotateY(-360deg);
-ms-transform: rotateY(-360deg);
transform: rotateY(-360deg);
}
}
.navbar {
background-color: #333;
height: 65px;
border-bottom: 6px solid #212529;
border-top: 6px solid #212529;
}
#navbar {
z-index: 9999;
}
.navbar-text {
vertical-align: middle;
margin-left: 200px;
height: inherit;
}
#media only screen and (max-width: 860px) {
.navbar-text {
display: inline-block;
align-items: center;
margin-left: 30px;
}
}
#navbar a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 0px 30px;
text-decoration: none;
font-size: 1.2em;
font-family: 'Raleway', sans-serif;
text-shadow: .1px 1px 1px black;
}
/* ABOUT */
#about {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-size: cover;
width: 100%;
height: 100%;
text-shadow: .1px .8px 1px black;
position: relative;
height: -65px;
margin-top: 200px;
}
/* .section2 {
position: absolute;
width: 100%;
} */
.section2 .row {
background: url("../images/improved-teamwork-and-
collaboration_1887x741.jpg") center center no-repeat;
height: 100%;
width: 100%;
margin-left: 0px;
margin-right: 0px;
border-radius: 0%;
}
.section2 .card {
background-color: RGBA(33, 37, 41, .80);
color: white;
min-height: -webkit-fill-available;
height: 100%;
}
.section2 .card-block {
font-weight: 520;
width: 50%;
margin: 0 auto;
font-size: 25px;
line-height: 50px;
padding: 60px;
}
.section2 a {
color: #9b0000;
-webkit-filter: drop-shadow(.1px .8px 2px rgba(0, 0, 0, .8));
filter: drop-shadow(0px 0px 2px rgba(0, 0, 0, .8));
}
.section2 .card-block {
z-index: 8000;
padding-right: 200px;
padding-left: 0px;
margin-left: 100px;
}
.section2 a:hover,
.section2 #skills:hover,
.section2 #projects:hover {
text-decoration: underline;
}
.section2 .btn {
border-color: #8e0000;
border-radius: 13px;
border-width: 3px;
font-weight: 500;
font-size: 0.8em;
transition: color 0.15s ease-in-out, background-color 0.15s ease- in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in- out;
}
.section2 .btn:hover {
background-color: #8e0000;
color: #212529;
text-decoration: none;
}
#about {
margin-bottom: 75px;
}
<!doctype html>
<html lang="en">
<head>
</head>
<body>
<!-- HOME -->
<section id="home" class="section1">
<div class='container'>
<div class="row justify-content-center">
<div class="col-md-12 col-sm-12">
<p class='intro'>
Hello, my name is <span class="highlight animated fadeIn" style="animation-delay: 1s; animation-duration:
1.8s">King</span>.
<br>
<div class="intro animated fadeInLeft" style="animation-
delay: 3s; animation- duration: 2s">And I'm a full- stack web developer.</div>
<a href="#myanchor"><button type="button" class="home-btn
btn btn-primary-outline btn-xs animated fadeIn"
style="animation-delay: 5s; animation-duration:
2s">VIEW MY WORK</button></a>
</p>
</div>
</div>
</div>
</section>
<!-- NAVIGATION -->
<div id="navbar">
<nav class="navbar navbar-expand-md navbar-dark bg-dark">
<div class="container">
<div class="logo-wrapper nav-item active">
<div class="logo" id="logo">
<a class="navbar-brand" href="#home"><img src="favicon.ico" alt="King's Brand Logo"></a>
</div>
<span class="brand" id="brand" style="animation-delay: 0s;
animation-duration: 3s">KING MAJOR</span>
</div>
<button class="navbar-toggler" type="button" data- toggle="collapse" data- target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="#myanchor">ABOUT
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#skills">SKILLS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#projects">PROJECTS
<span class="sr-only">(current)</span>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">CONTACT
<span class="sr-only">(current)</span>
</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- ABOUT -->
<div class="blank" style="margin: -65px 0px 200px 0px; position:
absolute;">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent
projects. THANKS!
</p>
<a href="General_Resume.pdf" class="btn btn-outline-
primary" target="__blank">Print My Resume
</a>
</div>
</div>
</div>
</div>
</div>
</section>
</body>
</html>

The reason you are having this issue is that the .section2 section it looks like you have a margin-top: 200px. Therefore creating that space. Now you can just adjust accordingly.
I would be careful when using margins. Using them only if you have to. I rarely use it, only for minor tweaks and responsiveness. If you are styling correct there should be no use for margins. I would take a look into using Flexbox. This is super useful when creating nice functional layouts. It's a great starter for new people too. The sooner you get into it, the easier layouts will be for you.
I also noticed that you are using javascript to add external links that open in a new page. To do that an easier way is to do something like this <a href="someoutsidelink.com" target="_blank">. Here is a reference, w3schools
As for your navbar fixed, here is some code that you should use instead of the one you have now.
var elementPosition = $("#navbar").offset();
$(window).scroll(function() {
if ($(window).scrollTop() > elementPosition.top) {
$("#navbar")
.css("position", "fixed")
.css("top", "0");
} else {
$("#navbar").css("position", "static");
}
});
Edit One:
Here's one way to do this one is adding a blank <div class="blank"> tags. Place it on top of the <section class="section2"> opening tag. then add a height: 200px; width: 100% therefore creating that space.

I found a solution! I refactored the code in the ABOUT section to this:
<!-- ABOUT -->
<div class="blank" style="position: absolute">
<a id="myanchor"></a>
</div>
<section id="about" class="section2">
<div class="row-fluid">
<div class="row">
<div class="card ">
<div class="card-block">
<div class="card-title">
<h1>Welcome, let's talk!</h1>
</div>
<div id="container">
<p> I started independent web development two years ago, and haven't looked back. A couple of things I love about coding are those moments when tough projects are complete, or discovering a solution to a difficult problem. Take a look at my
skills, and some of my recent projects. THANKS!
</p>
Print My Resume
</div>
</div>
</div>
</div>
</div>
</section>
Notice that I removed the opening div margin html styling.

when i re-size my browser all element change their place

when i re-size my browser all element change their place can any one help me ??? but some of element like logo & navigation when i re-size the browser Not affected
i tried to make the position fixed absolute or static but nothing change
<head>
<title>www.adamkides.com/main</title>
<link rel="icon" href="logo.jpg" type="image/x-icon">
<link href='http://fonts.googleapis.com/css? family=Archivo+Narrow:700italic,700,400' rel='stylesheet' type='text/css'>
<style type="text/css">
a{color:black;}
body {
font-family: 'Lucida Grande', helvetica, arial, sans-serif;
font-size: 12px;
background: white;
background-size:101%;
height:100%;
background-image: url('dr5.jpg');
background-repeat:no-repeat;
margin:-70 0 0 0;
}
#face:hover {
background: #333;
border-left: 5px solid #000;
}
#face{ MARGIN-LEFT: -850PX;
MARGIN-TOP: 1PX;}
#container
{
margin: 0 auto;
width: 100%;
background: #fff;
}
#header
{
background-image: url(hand.jpg);
background-size: 310px;
background-repeat: no-repeat;
padding: 20px;
background-color:white;
width: 320px;
height: 100px;
float:right;
margin: 70px 500px -11px 0%;
}
#header h1 { margin: 0; }
.navigation {
margin: 5px 20px 30px 20%;
background: #fff;
overflow: hidden;
width: 760px;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);
}
.navigation li {
width: 120px; border-left: 5px solid #666;
float: left;
cursor: pointer;
list-style-type: none;
padding: 10px 50px 10px 15px;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
-o-transition: all 0.3s ease-in;
}
.navigation li h2 {
font-family: georgia;
font-weight: bold;
font-style:arial;
font-size: 20px;
margin-bottom: 5px;
line-height: 16px;
}
.navigation li p{
font-size: 11px;
color: #999;
-webkit-transition: all 0.1s ease-in;
-moz-transition: all 0.1s ease-in;
-o-transition: all 0.1s ease-in;
}
.navigation li:hover {
background: greenyellow;
border-left: 5px solid #000;
}
.navigation li:hover h2 {
font-weight: bold;
color: yellow;
}
.navigation li:hover p {
color: orange;
padding-left: 5px;
}
#content-container
{ float: left;
width: 55%;
margin-top: -25px;
margin-left: 320px;
height: 60%;
background: #FFF url(layout-two-liquid-background.gif) repeat-y 68% 0;
}
.ti{
border-color: greenyellow;
border-style: dotted;
margin-top: -70px;
border-width: thin;
width: 235px;
height: 250px;
margin-left: 295px;
font-size: 24px;
color: orange;
font-weight: 700;}
#content {
clear: right;
float: left;
width: 60%;
padding: 5px 0;
margin: -14px -41px -294px 7%;
display: inline;
}
#content h2 { margin: 0; }
#aside
{
float: right;
width: 26%;
padding: 20px 0;
margin: 15 320 0 0;
display: inline;
}
#aside h3 { margin: 0; }
#footer{margin: 30px 20px -2px 0px;
overflow: hidden;
border-color: greenyellow;
border-style: dotted;
border-width: thin;
width: 760px;
height:100px;
background-color:white;
float: left;
padding-left: 100px;
box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.2);}
</style>
</head>
<body>
<div id="container">
<img src="logo1.jpg" width="50px" height="50px" style="margin-top: 75px;margin-left: 522px;/* border:solid; *//* border-color:#ef5d9b; */height: 100px;float: left;width: 100px;"> <div id="header" style="background-image: url(hand.jpg);">
</div>
<ul class="navigation">
<a href="mainpage.html"><li>
<h2>الصفحة الرئسية</h2>
<p>main page</p>
</li></a>
<a href="f.html"><li>
<h2>فلسفتنا</h2>
<p>our</p>
</li></a>
<a href="how.html"><li>
<h2>من نحن</h2>
<p>Who we are</p>
</li></a>
<a href="gallary.html"><li>
<h2>الاستديو</h2>
<p>gallary</p>
</li></a>
<image id="face" src="face.jpg" width="80px" height="80px"/>
</ul>
<div id="content-container">
<div id="content">
<h2 style="float:right;font-size:50px;color:green;"><img src="well.jpg" width="70px" height="70px"style="margin-top:10px;"> كلمة ترحيبية </h2>
<p align="right"style="float:right;font-size:25px ;margin-left:-10px;color:black;">
مرحباً بكم في صفحتنا التي عملنا بجهد متواضع لنجعل منها موقعاً متميزاً يخدم الجميع ، ليس فقط أهالي أطفال الروضة بل و أيضاً الزبائن الكرام ، و نتمنى أن تكون مرجعاً مفيداً لكم، و أن تكون حلقة وصل بيننا و بينكم ، . . . فلا تترددوا بتزويدنا بكل مقترحاتكم و آرائكم التي تساعدنا على التطور نحو الأفضل واعلموا أن رأيكم مهم لدينا وسيساعدنا على لتطور .
نأمل أن تجدوا المعلومات التي تبحثون عن
ها على موقعنا الالكتروني
، ولمزيد من المعلومات أو الاستفسارات الرجاء طلب ذلك،
وسوف يسعد نا توفيرها لكم نتطلع إلى الترحيب بكم في
روضتنا ونأمل أن يعودو أطفالكم بذكريات جميلة و تجربة
فريدة.
</p>
</div>
<div id="aside">
<h3>
<div class="ti" >
<p id="time"style="margin-left:20%;margin-top:70px;"></p>
<script>
var x=setInterval(function(){myTimer()},1000);
function myTimer() {
var d = new Date();
document.getElementById("time").innerHTML = d.toLocaleTimeString();
}</script>
<p id="date"style="margin-left:15%"></p>
<p style="margin-left:30%">اتسلى معنى</p>
<script>
var d = new Date();
document.getElementById("date").innerHTML = d.toDateString();
</script><br><br>
</script>
</div>
</div>
<div id="footer"><h2 style="margin-top:7px;float:right;margin-right:30px;color:green;font-size:30px;">:اتصل بنا</h2></div>
<h4 style="font-size:18px;float:right;margin-top:-60px;margin-right:50px;">065925575 - 0796877760<br> 065925575 فاكس </h4>
<h2 style="margin-top:-94px;float:left;margin-left:30px;color:green;font-size:30px;">:البريد الالكتروني</h2>
<h4><a style="margin-left:30px;margin-top:-40px;clear:left;color:black;float:left;font-size:18px;" href="mailto:info#adam-kids.com">info#adam-kids.com</a></h4 >
<h2 style="float:right;margin-top:-100px;margin-right:150px;color:green;font-size:30px;">:العنوان</h2>
<h4 style="margin-bottom: auto;margin-top:-67px;margin-right:80px;font-size:18px;width:190px;float:right;">
بناية رقم 9 - شارع علي سيدو الكردي
- خلف كنيسة اللاتين - عبدون الشمالي
- عمان - الأردن
</h4>
</div>
</body>
</html>

You need to make your CSS responsive. By responsive, I mean that your CSS should be able to react to the different browser widths and heights.
This is a massive topic but a good place to start might be here:
http://www.w3schools.com/css/css_responsive_intro.asp
You should also look into CSS frameworks such as Bootstrap or Foundation:
http://getbootstrap.com/
http://foundation.zurb.com/
Both of which have plenty of online tutorials you can learn from. The w3schools link I have provided gives you a basic introduction to Bootstrap.

That's happening because you're mixing fixed units and relative units in your CSS.
Fixed units like pixels keeps the especified sizes even when you resize your browser, while relative units like percentages reacts and adapts to resizing.
Consider that fixed units will create a lot of horizontal scroll depending on the device your site it's being viewed from, but relative units will reorganize your page for a better presentation, that's what we call "Responsive".

Use the browser development tool to see the properties of elements and inspect why they are behaving that way. For your example, the ul with the 'navigation' class has margin-left set to 20%, which makes it change position when the total width of the page changes.
I have to agree with the others, though, and ask you to read more about the subject so you can understand the samples you are working with.

jQuery slide content on radio check

I'm trying to make a small jQuery function to hide & show content when a radio button is checked. The script works but when the radio button is checked the content is not showing right. It's possible to make effect to slide out then slide in the other content?
HTML:
<!-- Section class pricing -->
<section class="pricing">
<div class="container">
<hr class="hr">
<!-- Price table switcher -->
<div class="table-switcher" id="btn">
<p class="fieldset">
<input type="radio" checked="checked" name="duration" value="account-1" id="account-1">
<label for="account-1">1</label>
<input type="radio" name="duration" value="account-2" id="account-2">
<label for="account-2">2</label>
<span class="btn-switch"></span>
</p>
</div>
<!-- Price table switcher end -->
<div class="clearfix"></div>
<!-- Info box -->
<div class="clearfix"></div>
<div class="accounts container">
<div class="price-table">
<!-- Account Plus -->
<div class="col-md-12">
<!-- Table -->
<div class="account-1 account-box">
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99k</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
<!-- Table -->
<ul class="list-unstyled col-md-6">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
<!-- Table end -->
</div>
</div>
<!-- Account Plus end -->
<!-- Account O€ -->
<div class="account-2 account-box">
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
<!-- Table -->
<div class="col-md-6">
<ul class="list-unstyled">
<li class="plan">Basic</li>
<li class="plan-cost">$99</li>
<li class="plan-duration">Per Month</li>
<li>Use on One Site</li>
<li>Feature Two</li>
<li>Another Great Feature</li>
<li class="plan-button">Get Started »</li>
</ul>
</div>
<!-- Table end -->
</div>
<!-- Account 0€ -->
</div>
</div>
</div>
</section>
CSS:
// Prebuild colors
#white : #ffffff;
#dark : #4a4a4a;
#blue : #4e94c9;
#blue-dark : #2279bc;
#blue-font : #276db3;
#purple : #805ca2;
#purple-dark: #5b308d;
#gray-light : #a8a8a8;
#gray-font : #797979;
#pink : #bf4194;
#pink-light : #F04;
// Other
#letter-spacing:(2px);
.bold { font-weight: 700}
.hr {
max-width: 100px;
height: 4px;
background: url("../images/hr.gif") no-repeat center;
margin: 20px auto;
}
// Pricing section -3
.pricing {
padding: 100px 0;
h2 {
letter-spacing: #letter-spacing;
font-size: 30px;
font-weight: 400;
text-transform: uppercase;
text-align: center;
color: #blue-font;
.bold {
color: #purple-dark;
}
}
// Price table switcher
.table-switcher {
text-align: center;
input[type="radio"]:checked + label + .btn-switch,
input[type="radio"]:checked + label:nth-of-type(n) + .cd-switch{
/* Safary bug fix selector */
-webkit-transform: translateX(120px);
-moz-transform: translateX(120px);
-ms-transform: translateX(120px);
-o-transform: translateX(120px);
transform: translateX(120px);
background: #blue-font;
}
.fieldset {
margin-top: 15px;
margin-bottom: 30px;
display: inline-block;
position: relative;
padding: 0px 2px;
border-radius: 50em;
border: 1px solid #gray-light;
input[type="radio"]:checked + label {
color: #white;
transition: all 0.5s;
}
}
input[type="radio"] {
position: absolute;
opacity: 0;
}
label {
position: relative;
z-index: 1;
display: inline-block;
float: left;
width: 120px;
height: 39px;
line-height: 45px;
cursor: pointer;
font-size: 1.4rem;
}
.btn-switch {
position: absolute;
top: 2px;
left: 2px;
height: 40px;
width: 120px;
background-color: #purple-dark;
border-radius: 50em;
-webkit-transition: -webkit-transform 0.5s;
-moz-transition: -moz-transform 0.5s;
transition: transform 0.5s;
}
}
.no-js .table-switcher {
display: none;
}
// Table info
// Popover box
.arrow_box {
position: relative;
background: #purple;
border: 3px solid #purple-dark;
padding: 15px;
color: #white;
}
.arrow_box{
&:after {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
&:before {
top: 100%;
left: 50%;
border: solid transparent;
content: " ";
height: 0;
width: 0;
position: absolute;
pointer-events: none;
}
}
.arrow_box {
&:before{
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
&:after {
border-color: rgba(136, 183, 213, 0);
border-top-color: #purple-dark;
border-width: 10px;
margin-left: -10px;
}
}
// Accounts
.accounts {
position: relative;
transition: all 0.5s;
}
.top-tooltip{
background-color: #26c07d;
font-size: 12px;
font-weight: 400;
margin:-87px auto 68px;
padding: 6px;
color:#fff;
width:80px;
}
.price-table {
width: 100%;
.account-1 {
.col-md-6 {
padding: 0;
left: 0;
}
}
}
.best-value{
padding: 87px 0 72px !important;
}
.small-boxes {
margin-top: 40px;
padding-top: 72px;
padding-bottom: 68px;
text-transform: uppercase;
text-align: center;
background-color: #fff;
width: 100%;
}
.plan {
font-size: 24px;
color: #79a5b3;
line-height:30px;
border: none !important;
}
.plan-cost {
font-size:60px !important;
color:#000 !important;
line-height:90px !important;
border: none !important;
}
.plan-duration {
line-height: 30px !important;
margin-bottom:35px;
border: none !important;
}
.plan-button {
border: none !important;
margin-top: 30px;
}
.plan-button-big {
border: none !important;
margin-top: 45px;
}
.price-table ul li {
color: #a2a4a6;
font-size: 16px;
border-bottom: #f2f4f5 1px solid;
border-top: #f2f4f5 1px solid;
line-height: 47px;
}
.price-table ul li a{
background-color:#FFF;
border: #d4d7d9 1px solid;
padding: 15px 30px;
font-size: 20px;
color:#27b0d8;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a:hover{
background-color:#44bbdd;
border: #44bbdd 1px solid;
color:#fff;
}
.price-table ul li a.big{
background-color:#ec4f4f;
border: #ec4f4f 1px solid;
padding: 15px 30px;
font-size: 24px;
color:#fff;
font-weight:400;
text-decoration:none;
border-radius: 4px;
}
.price-table ul li a.big:hover{
background-color:#293340;
border: #293340 1px solid;
color:#fff;
}
}
JS:
$('.account-2').hide();
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
});
$('input[name="duration"]').click(function () {
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
});
});
Demo

Try this script... codepen
$('.account-2').hide();
$(document).ready(function () {
var flagcheck= false;
$('input[name="duration"]').click(function () {
if(flagcheck==false){
$('.account-1').fadeOut('slow');
$('.account-2').fadeIn('slow');
flagcheck=true;
}else{
$('.account-2').fadeOut('slow');
$('.account-1').fadeIn('slow');
flagcheck= false;
}
});
});

It is not working as you are using same trigger to do the same thing. Use
this.val()
to target your content that you want to display.
UPDATED:
$(document).ready(function () {
$('input[name="duration"]').click(function () {
$objToHide = "";
$('.account-box').each(function(){//find out which obj is visible here
if ($(this).css("display") == "block"){
$objToHide = $(this);
}
});
var content = $(this).val()
$objToHide.fadeOut('slow', function(){
$("."+content).fadeIn('slow')
});
});
});
Try above now, with this one you will find the visible element first and fade it out, when the fadeOut event will be done the other element will fade in.

CSS shadows and rounded corners in bootstrap tabs

Are there any css hacks to make come up with this image below with bootstrap nav-tab markup? Having the rounded corners with shadows in it?
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul id="tabs" class="nav nav-tabs" data-tabs="tabs">
<li class="active">ABOUT OUR SEASONINGS</li>
<li>GET RECIPE IDEAS</li>
<li>INGREDIENTS & NUTRITION INFO</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane active" id="red">
<h1>Red</h1>
<p>red red red red red red</p>
</div>
<div class="tab-pane" id="orange">
<h1>Orange</h1>
<p>orange orange orange orange orange</p>
</div>
<div class="tab-pane" id="yellow">
<h1>Yellow</h1>
<p>yellow yellow yellow yellow yellow</p>
</div>
</div>
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
I'm thinking of making it

Here I provide the complete example to create bootstrap tab panel with a rounded border.
$(function(){
$('#myTab a').click(function (e) {
e.preventDefault();
$(this).tab('show');
})
});
html{
margin: 20px 10px auto;
font-family: arial,sans-serif;
}
.nav:after,
.nav:before {
content:"";
display: table;
}
.nav:after {
clear:both;
overflow:hidden;
}
.nav {
zoom: 1;
margin-left: 20px;
padding-bottom: 3px;
}
.nav li {
list-style: none outside none;
float: left;
position: relative;
}
.nav .active {
z-index: 3;
}
.nav li:before,
.nav li:after,
.nav a:before,
.nav a:after {
content:"";
position: absolute;
bottom:0;
}
.nav a {
float: left;
padding: 10px 40px;
text-decoration: none;
color: #fff;
background: rgb(97, 142, 70);
border-radius: 5px 5px 0 0;
-webkit-transform: perspective(30) rotateX(10deg);
}
.nav .active a {
background: #F66599;
color:#BE3569;
-webkit-transform: perspective(30) rotateX(10deg);
}
.nav a:before {
left:-20px;
}
.nav a:after {
right: -20px;
}
.nav .active:before,
.nav .active:after {
z-index: 1;
background: #F66599;
}
.nav li:first-child a:before,
.nav li:last-child a:after {
background-color: #fff;
}
.tab-content {
background: rgba(60, 118, 61, 0.17);;
color:#444444;
padding: 20px;
}
.tab-pane {
display: none;
}
.tab-pane.active {
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" rel="stylesheet"/>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<ul class="nav nav-tabs" id="myTab">
<li class="active">Home</li>
<li>Portfolio</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="home">Home page</div>
<div class="tab-pane" id="portfolio">Portfolio page</div>
<div class="tab-pane" id="messages">Messages page</div>
<div class="tab-pane" id="settings">Setting page</div>
</div>
To Add CSS shadows use following css
.tab-content { -webkit-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); -moz-box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); box-shadow: 0px -5px 14px 1px rgba(0,0,0,0.75); }
jsfiddle : jsfiddle link
Ref: w3codeschool.com

Try something like this
CSS:
.nav-tabs{
box-shadow: 0px 0px 10px #777;
}
.nav-tabs>li.active>a, .nav-tabs>li.active>a:hover, .nav-tabs>li.active>a:focus{
-webkit-transform: perspective(30) rotateX(10deg);
}