Develop Reference

Unable to toggle between division

I am creating a portfolio by watching this tutorial - https://www.youtube.com/watch?v=27JtRAI3QO8&list=WL&index=12 (I am stuck at 1:12:13)
I have created a qualification section. there are two division that is education and work.
By default it shows education tab. when I click on the work tab it shows content in the work tab. But when I click back on the education tab it doesn't show the content of the education tab.
actually i am beginner to js. i am unable to get the error in the js file.
my Html code is
<section class="qualification section">
<h2 class="section_title">Qualification</h2>
<span class="section_subtitle">My personal journey</span>
<div class="q_container container">
<div class="q_tabs">
<div class="q_btn btn-flex q_active " data-target ='#education'>
<i class="uil uil-graduation-cap q_icon"></i>Education
</div>
<div class="q_btn btn-flex " data-target ='#work'>
<i class="uil uil-briefcase-alt q_icon"></i>Work
</div>
</div>
<div class="q_section">
<!--==================== QUALIFICATION c1====================-->
<div class="q_content q_active " data-content id="Education">
<!--==================== QUALIFICATION --1====================-->
<div class="q_data">
<div>
<h3 class="q_title">Electronics and communication Engineer</h3>
<span class="q_subtitle">M. S Ramaiah University of Applied Sciences</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2018-2022
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
<!--==================== QUALIFICATION --2====================-->
<div class="q_data">
<div></div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
<div>
<h3 class="q_title">PUC</h3>
<span class="q_subtitle">Gurukula independent PU college of science</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2016-2018
</div>
</div>
</div>
<!--==================== QUALIFICATION --3====================-->
<div class="q_data">
<div>
<h3 class="q_title">SSLC</h3>
<span class="q_subtitle">Sardar Vallabhbhai Patel Memorial H.S</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>2006-2016
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
</div>
<!--==================== QUALIFICATION c2====================-->
<div class="q_content " data-content id="work">
<!--==================== QUALIFICATION --1====================-->
<div class="q_data">
<div>
<h3 class="q_title">Computer Communication Network and Digital Switching</h3>
<span class="q_subtitle">RTTC BSNL Mysore</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>08/07/2019- 13/07/2019
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
<!--==================== QUALIFICATION --2====================-->
<div class="q_data">
<div></div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
<div>
<h3 class="q_title">IOT and Computer vision</h3>
<span class="q_subtitle">The Sparks Foundation</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>26/07/2021- 21/08/2021
</div>
</div>
</div>
<!--==================== QUALIFICATION --3====================-->
<div class="q_data">
<div>
<h3 class="q_title">Electric vehicles</h3>
<span class="q_subtitle">Elite Techno Group</span>
<div class="q_cale">
<i class="uil uil-calendar-alt"></i>18/08/2021- 18/09/2021
</div>
</div>
<div>
<span class="q_round"></span>
<span class="q_line"></span>
</div>
</div>
</div>
</div>
</div>
</section>
Here is my CSS code
.skills__container{
row-gap: 0;
}
.skills__header{
display: flex;
align-items: center;
margin-bottom: var(--mb-2-5);
cursor: pointer;
}
.skills__icon,
.skills__arrow{
font-size: 2rem;
color: var(--first-color);
}
.skills__icon{
margin-right: var(--mb-0-75);
}
.skills__title{
font-size: var(--h3-font-size);
}
.skills__subtitle{
font-size: var(--small-font-size);
color: var(--text-color-light);
}
.skills__arrow{
margin-left: auto;
transition: .4s;
}
.skills__list{
row-gap: 1.5rem;
padding-left: 2.7rem;
}
.skills__title{
display: flex;
justify-content: space-between;
margin-bottom: var(--mb-0-5);
}
.skills__name{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.skills__bar,
.skills__percentage{
height: 5px;
border-radius: .25rem;
}
.skills__bar{
background-color: hsl(250, 92%, 85%);
}
.skills__percentage{
display: block;
background-color: hsl(250, 69%, 61%);
}
.skills__html{ width: 90%;}
.skills__css{ width: 70%;}
.skills__bootstrap{ width: 80%;}
.skills__Angular{ width: 20%;}
.skills__java{ width: 70%;}
.skills__python{ width: 70%;}
.skills__php{ width: 5%;}
.skills__git{ width: 70%;}
.skills__sql{ width: 40%;}
.skills__agile{ width: 10%;}
.skills_close .skills__list{
height: 0;
overflow: hidden;
}
.skills_open .skills__list{
height: max-content;
margin-bottom: var(--mb-2-5);
}
.skills_open .skills__arrow{
transform: rotate(-180deg);
}
/*==================== QUALIFICATION ====================*/
.q_tabs{
display: flex;
justify-content: space-evenly;
margin-bottom: var(--mb-2);
}
.q_btn{
font-size: var(--h3-font-size);
font-weight: var(--font-medium);
cursor: pointer;
}
.q_btn:hover{
color: var(--first-color);
}
.q_icon{
font-size: 1.8rem;
margin-left: var(--mb-0-25);
}
.q_data{
display: grid;
grid-template-columns: 1fr max-content 1fr;
column-gap: 1.5rem;
}
.q_title{
font-size: var(--normal-font-size);
font-weight: var(--font-medium);
}
.q_subtitle{
display: inline-block;
font-size: var(--small-font-size);
margin-bottom: var(--mb-1);
}
.q_cale{
font-size: var(--smaller-font-size);
color: var(--text-color-light);
}
.q_round{
display: inline-block;
width: 13px;
height: 13px;
background-color: var(--first-color);
border-radius: 50%;
}
.q_line{
display: block;
width: 1.9px;
height: 100%;
background-color: var(--first-color);
transform: translate(6px, -7px);
}
.q_content[data-content]{
display: none;
}
.q_active[data-content]{
display: block;
}
.q_btn.q_active{
color: var(--first-color);
}
Here is my js code
const tabs = document.querySelectorAll('[data-target]'),
tabc = document.querySelectorAll('[data-content]');
tabs.forEach(tab =>{
tab.addEventListener('click', () =>{
const target = document.querySelector(tab.dataset.target);
tabc.forEach(tabct =>{
tabct.classList.remove('q_active');
});
target.classList.add('q_active');
tabs.forEach(tab =>{
tab.classList.remove('q_active');
});
target.classList.add('q_active');
});
});

data-target and id need to be exactly the same. You used id="Education" but data-target ='#education'. Hope this will solve your problem.

JQuery Show/Hide DIV Not working correctly

I have a sub menu div which has a cart span in it. When the user hovers over it, it displays my hidden cart DIV. The user can then move the mouse to the DIV to remove an item.
If the user displays and moves the mouse into the hidden DIV then moves out of this, the DIV is re-hidden
The issue i'm having is that if the user displays the DIV but instead of moving into hidden DIV, goes back to the sub/main menu the DIV is not re-hiding and i have tried everything i can think.
Please check my fiddle
If you dont go to the div first it wont hide it
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
I need the hidden DIV to re-hide if the user goes anywhere on the page without having to go inside it and then out of it.

With Jquery you can check on which side the mouse leaves the button and keep the div open when you leave the button on the bottom.
$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
$('#subMenuCartBox').mouseleave(function (e) {
var $this = $(this);
var bottom = $this.offset().top + $this.outerHeight();
if(e.pageY < bottom) {
console.log("CLOSE");
$('#cartBox').hide();
}
});
$('#cartBox').mouseleave(function () {
$('#cartBox').hide();
});
}).mouseleave(function () {
setTimeout(function () {
if (!$('#cartBox').length) {
$('#cartBox').hide();
}
});
})

$('#subMenuCartBox').mouseover(function () {
$('#cartBox').show();
}).mouseleave(function () {
$('#cartBox').hide();
})
.mainMenu {
width: 100%;
height: 75px;
background-color: lightblue;
}
.subMenu {
width: 100%;
height: 45px;
background-color: gray;
text-align: right;
padding: 10px;
}
.subMenuOptionSpan {
display: inline-flex;
}
.subMenuCartBox {
background-color: deepskyblue;
padding: 5px;
width: 100%;
cursor: pointer;
}
.cartBox {
float: right;
padding: 15px;
background-color: lightgray;
display: none;
left: auto;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="mainMenu">
Main menu options
</div>
<div class="subMenu">
<div class="row justify-content-end align-items-center">
<span class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-user fa-lg"></i>
<div id="username">Test of long username</div>
</span>
<span id="subMenuCartBox" class="subMenuOptionSpan col-12 col-sm-auto">
<i class="fas fa-shopping-cart fa-lg"></i>
<div id="cartAmountBox" class="subMenuCartBox">
<span id="cartAmountText" class="subMenuCartAmount">0 item(s) - £0.00</span>
</div>
</span>
</div>
</div>
<div id="cartBox" class="cartBox">
<b id="emptyCart">There are currently no items in your cart.</b>
</div>
Do you mean you want to archive this? please clarify your question.

How do I get this Anchor tag to fill the space before the next div?

I have been trying to create a bootstrap drop down box with some additional buttons inside. I have the main functionality sorted but the aesthetics are not quite right.
The issue I am having is that the Anchor elements are not filling the space up to the buttons on the right. I have tried experimenting with different combinations of block and inline-block which I have read elsewhere should fill the space but when it does it pushes the buttons down to the next line. When I do manage to get the buttons and anchor elements on the same line the selection area for the anchor does not extend the entire way up to the buttons.
I am currently tearing my hair out trying to get it to work but am having no luck so if anyone can offer any assistance it will be greatly appreciated.
Update:
Thanks to #Matus Jurika for suggesting using calc to adjust the sizing of the anchor element.
Updated working fiddle: fiddle

I sugget using calc for width:
.anchorDiv {
display: inline-block;
width: calc(100% - 74px);
}
Working Fiddle:
https://jsfiddle.net/q3fra0bm/36/

This here is snippet for your solution. I am just using bootstrap row class.
.comboRow {
margin-bottom: 3px;
}
.comboItem {
display: block !important;
/*width: 67%;*/
}
.comboButtons {
float:right;
margin-top: 3px;
width: 74px;
display: block;
}
.comboItemContainer {
width: 100%;
display: inline-block;
}
.anchorDiv {
display: inline-block;
}
.close {
/*float: right;*/
/*margin-right: 10px;*/
}
.close .edit {
margin-right: 5px;
}
#presetDropdownButton {
position:absolute;
}
.glyphicon {
font-size: 15px;
}
#presetDropdown {
width: max-content;
}
#newPresetEntry {
width: 50%;
height: 24px;
margin-left: 18px;
padding-left: 6px;
padding-right: 6px;
}
.dropdown-menu > li > div > div > a {
padding: 3px 20px;
clear: both;
font-weight: 400;
line-height: 1.42857143;
color: #333;
white-space: nowrap;
display: block;
}
.dropdown-menu > li > div > div > a:focus {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.dropdown-menu > li > div > div > a:hover {
color: #262626;
text-decoration: none;
background-color: #f5f5f5;
}
.pl-0 {
padding-left: 0 !important;
}
.pr-0 {
padding-right: 0 !important;
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<div class="dropdown" id="presetDropdownButton">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown" aria-expanded="false">
Presets
<span class="caret"></span>
</button>
<ul class="dropdown-menu" id="presetDropdown">
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 1</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 2 with longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
<li class="comboRow">
<div class="row">
<div class="col-md-9 col-xs-9 pr-0">
<a class="comboItem" href="#" value="1">Preset 3 with even longer name</a>
</div>
<div class="col-md-3 col-xs-3 pl-0">
<button type="button" class="close deletePreset" aria-label="Delete" style="margin-right: 10px;">
<span aria-hidden="true">×</span>
</button>
<button type="button" class="close edit editPreset" aria-label="Edit" style="margin-right: 3px;">
<span aria-hidden="true">✎</span>
</button>
<button type="button" class="close edit savePreset" aria-label="Save" style="margin-right: 3px;">
<span style="font-size: 18px;" aria-hidden="true">💾</span>
</button>
</div>
</div>
</li>
</ul>
</div>

This should do the trick.
.comboItemContainer {
width: 100%;
position: relative;
}
.anchorDiv {
display: inline-block;
width: 100%;
padding: 0 80px 0 0;
}
.comboButtons {
width: 74px;
display: block;
position: absolute;
top: 0px;
right: 0px;
}
I made the container relative so that I can freely use absolute positioning on its children with a (0,0) origin relative to the container. Then I made the buttons absolute, made it top 0 and right 0. Added 100% width on the anchor and 80px padding-right.
This may look hacky but I'm not really that good in Flex and absolutely zero in Grid
This is almost certainly cross browser though

Can't get show/hide to repeat on a menu item after first click

I am attempting to repeat a show/hide command on a div in a little navigation menu I am creating. I can get the show/hide to work once on all four buttons, but I can't get it to repeat if I were to click the same button three times. It simply adds the active class, but doesn't hide the remaining div's again. I want the action that clicking and unclicking the div has to work every time forever.
JS Fiddle here: https://jsfiddle.net/c3md14jf/
HTML:
<div class="mobile-container">
<div class="mobile-row">
<a href="#fa">
<div class="mobile-square">
<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
<p>
Foreign Affairs
</p>
</div>
</a>
<a href="#travel">
<div class="mobile-square">
<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
<p>
Travel
</p>
</div>
</a>
</div>
</div>
<div class="mobile-container">
<div class="mobile-row">
<a href="#dev">
<div class="mobile-square">
<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
<p>
Development
</p>
</div>
</a>
<a href="#misc">
<div class="mobile-square">
<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
<p>
Fitness
</p>
</div>
</a>
</div>
</div>
CSS:
#import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');
body {
color: #008fc5;
background-color: #fff;
}
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
margin: 0;
}
i {
padding-top: 10px;
padding-bottom: 5px;
}
.mobile-container a {
text-decoration: none;
}
.mobile-row {
width: 100%;
margin-top: 5px;
}
.mobile-square {
width: 49%;
height: auto;
min-height: 95px;
color: #fff;
background-color: #008fc5;
text-align:center;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
position:relative;
}
.mobile-square p {
font-family: 'Montserrat', sans-serif;
}
.active {
background-color: #004762;
}
JS:
var mobileSquare = $(".mobile-square");
mobileSquare.click(function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).hide();
activeSquare.click(function(){
mobileSquare.not(activeSquare).show();
});
});

So I only changed the on("click", function(){...}) handler, so that rather than using show/hide i'm using toggle. By doing this, I don't have to have the click handler for the activeclass. I suspect that may have been part of the problem.
var mobileSquare = $(".mobile-square");
mobileSquare.on("click", function(){
var activeSquare = $(this);
activeSquare.toggleClass("active");
mobileSquare.not(activeSquare).toggle();
});
/* General Rules */
/* <link href="https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu" rel="stylesheet">
font-family: 'Open Sans', sans-serif;
font-family: 'Raleway', sans-serif;
font-family: 'PT Sans', sans-serif;
font-family: 'Ubuntu', sans-serif;
font-family: 'Exo', sans-serif;
font-family: 'Quicksand', sans-serif;
*/
#import url('https://fonts.googleapis.com/css?family=Exo|Open+Sans|PT+Sans|Quicksand|Raleway|Ubuntu|Montserrat');
body {
color: #008fc5;
background-color: #fff;
}
p {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 22px;
margin: 0;
}
i {
padding-top: 10px;
padding-bottom: 5px;
}
.mobile-container a {
text-decoration: none;
}
.mobile-row {
width: 100%;
margin-top: 5px;
}
.mobile-square {
width: 49%;
height: auto;
min-height: 95px;
color: #fff;
background-color: #008fc5;
text-align:center;
display: inline-block;
vertical-align: middle;
border-radius: 5px;
position:relative;
}
.mobile-square p {
font-family: 'Montserrat', sans-serif;
}
.active {
background-color: #004762;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://use.fontawesome.com/670a0bbb85.js"></script>
<div class="mobile-container">
<div class="mobile-row">
<a href="#fa">
<div class="mobile-square">
<i class="fa fa-globe" style="font-size:48px;" aria-hidden="true"></i>
<p>
Foreign Affairs
</p>
</div>
</a>
<a href="#travel">
<div class="mobile-square">
<i class="fa fa-plane" style="font-size:48px;" aria-hidden="true"></i>
<p>
Travel
</p>
</div>
</a>
</div>
</div>
<div class="mobile-container">
<div class="mobile-row">
<a href="#dev">
<div class="mobile-square">
<i class="fa fa-code" style="font-size:48px;" aria-hidden="true"></i>
<p>
Development
</p>
</div>
</a>
<a href="#misc">
<div class="mobile-square">
<i class="fa fa-heart" style="font-size:48px;" aria-hidden="true"></i>
<p>
Fitness
</p>
</div>
</a>
</div>
</div>

Better off using toggle instead of show/hide. Take a look to see if this points you in the right direction.
`https://jsfiddle.net/c3md14jf/1/`

slide toggle like github language stats

I have been developing github unofficial card. So that, I designed a simple card for this and create little script for toggling language stats and general stats.
After that I realised one problem when I toggle.
I want to it should be like https://github.com/github/developer.github.com
you can check with toggling language colors:
my problematic html is here:
<div class="panel panel-default">
<div class="panel-body" style="min-height:60px;max-height: 60px;">
<ul id="language-stats">
<li>
<span class="color-block language-color" style="background-color:#4F5D95;"></span>
<span class="lang">PHP</span>
<span class="percent">64.5%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#ccc;"></span>
<span class="lang">Smarty</span>
<span class="percent">19.6%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#563d7c;"></span>
<span class="lang">CSS</span>
<span class="percent">7.9%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#f1e05a;"></span>
<span class="lang">JavaScript</span>
<span class="percent">6.4%</span>
</li>
<li>
<span class="color-block language-color" style="background-color:#e44b23;"></span>
<span class="lang">HTML</span>
<span class="percent">1.6%</span>
</li>
</ul>
<ul id="general-stats">
<li><i class="fa fa-history"></i> <small>22 commits</small></li>
<li><i class="fa fa-star"></i> <small>5 stars</small></li>
<li><i class="fa fa-code-fork"></i> <small>3 forks</small></li>
</ul>
</div>
<div class="languages" data-toggle="tooltip" data-placement="bottom" title="Click for language details">
<span class="language-color" aria-label="PHP 64.5%" style="width:64.5%; background-color:#4F5D95;" itemprop="keywords">PHP</span>
<span class="language-color" aria-label="Smarty 19.6%" style="width:19.6%; background-color:#ccc;" itemprop="keywords">Smarty</span>
<span class="language-color" aria-label="CSS 7.9%" style="width:7.9%; background-color:#563d7c;" itemprop="keywords">CSS</span>
<span class="language-color" aria-label="JavaScript 6.4%" style="width:6.4%; background-color:#f1e05a;" itemprop="keywords">JavaScript</span>
<span class="language-color" aria-label="HTML 1.6%" style="width:1.6%; background-color:#e44b23;" itemprop="keywords">HTML</span>
</div>
</div>
CSS
body {
padding:20px;
}
.languages {
padding:0;
}
.languages {
display: table;
width: 100%;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
overflow: hidden;
border: 1px solid #ddd;
border-top: 0;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.languages .language-color {
display: table-cell;
line-height: 7px;
text-indent: -9999px;
}
#general-stats {
padding:0;
display: table;
width: 100%;
table-layout: fixed;
}
#general-stats li {
text-align: center;
display: table-cell;
}
#language-stats {
padding:0;
display: none;
width: 100%;
table-layout: fixed;
}
#language-stats li {
text-align: center;
display: table-cell;
}
li .language-color {
display: inline-block;
width: 10px;
height: 10px;
border-radius: 50%;
}
my problematic js is here:
<script>
function toggleLanguages() {
$('#language-stats').toggle( 'slide', {direction:'up'} , 300);
}
function toggleGeneralStats() {
$('#general-stats').toggle( 'slide', {direction:'up'} , 300);
}
$('.languages').click(function() {
if($('#general-stats').css('display') == "none") {
$('#general-stats').toggle( 'slide', {direction:'up'} , 300, toggleLanguages());
} else {
$('#language-stats').toggle( 'slide', {direction:'up'} , 300, toggleGeneralStats());
$('#language-stats').css('display','table');
}
});
</script>
http://jsfiddle.net/fyww2t4n/
Kind Regards.

You could add overflow:hidden to .panel-body