Что должно быть и как это реализовано на данный момент:
$(document).ready(function () {
$(".rbm i").click(function () {
var time = 300;
var toggle = "hide";
if ($(".L .hidden").css("display") == "none") {
toggle = "show";
} else {
toggle = "hide";
}
$(".L .hidden").animate({
width: toggle
}, time);
});
});
.L {
font-size: 1.2em;
font-weight: bold;
vertical-align: middle;
}
.align {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.t {
height: 10px;
position: relative;
}
.L span {
padding: 5px 10px;
margin: 0;
border-right: none;
}
.p0m0a {
padding: 0;
margin: 0 auto;
white-space: nowrap;
}
.inline, li, ul {
display: inline-block;
}
.rbm {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
}
.rb {
max-height: 100%;
padding-right: 10px;
}
.rbm i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t">
<div class="rb align">
<div class="submenu inline">
<div class="L inline uC">
<div class="hidden">
<span>aa</span><!--
--><span>bb</span><!--
--><span>cc</span>
</div>
</div>
</div><!--
--><div class="rbm inline">
<i class="icon">DDD</i>
</div>
</div>
</div>
Т.к. все три значения связаны одним контекстом, то необходимо реализовать списком, который располагается в строку. Во время анимации элементы списка начинают скакать:
$(document).ready(function () {
$(".rbm i").click(function () {
var time = 300;
var toggle = "hide";
if ($(".L .hidden").css("display") == "none") {
toggle = "show";
} else {
toggle = "hide";
}
$(".L .hidden").animate({
width: toggle
}, time);
});
});
.L {
font-size: 1.2em;
font-weight: bold;
vertical-align: middle;
}
.align {
position: absolute;
top: 50%;
transform: translateY(-50%);
}
.t {
height: 10px;
position: relative;
}
.L span {
padding: 5px 10px;
margin: 0;
border-right: none;
}
.p0m0a {
padding: 0;
margin: 0 auto;
}
.inline, li, ul {
display: inline-block;
}
.rbm {
color: hsla(0, 0%, 80%, 1);
font-size: 2.7em;
vertical-align: middle;
}
.rb {
max-height: 100%;
padding-right: 10px;
}
.rbm i {
padding: 9px 18px;
margin: 0 6px;
vertical-align: bottom;
border: 1px solid hsla(0, 0%, 80%, 1);
}
.hidden {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="t">
<div class="rb align">
<div class="submenu inline">
<div class="L inline uC">
<div class="hidden">
<ul class="p0m0a">
<li>ua</li>
<li>en</li>
<li>ru</li>
</ul>
</div>
</div>
</div><!--
--><div class="rbm inline">
<i class="icon">DDD</i>
</div>
</div>
</div>