What should be and how it is implemented at the moment:
$(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> Because all three values are connected by one context, it is necessary to implement a list that is located in a string. During the animation, the list items start to jump:
$(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> 
