I am looking to design a unique Web Icon Font Dropdown Menu where the associated text is displayed next to the Flag Icons only when the menu is open.
Once a selection is made and the menu is closed, I want to show only the Active Flag Icon without any accompanying text.
Upon loading the webpage, one of the flags should already be active by default, such as Greece.
https://i.sstatic.net/97sJ4.jpg https://i.sstatic.net/qupzF.jpg
The following JQuery code is what I currently have, with a potential issue indicated by "this(TEXT)". I believe there might be room for improvement or alternative solutions using Bootstrap 4, possibly utilizing the active state to add or remove classes with jQuery.
$(".dropdown-menu li a").click(function(){
$(this).parents(".dropdown").find('.btn').html($(this).text() + ' <span class="caret"></span>' + ' <span class="caret"></span>');
$(this).parents(".dropdown").find('.btn').val($(this).data('value'));
});
This is my HTML Markup (Using Bootstrap 4)
<nav class="p-0 navbar navbar-expand fixed-top bg-white fixed-top">
<div class="container">
<ul class="container-fluid navbar-nav js-signin-modal-trigger justify-content-end list-unstyled" id="navbar2SupportedContent">
<li class="dropdown">
<a class="bg-light btn btn-default dropdown-toggle mx-0" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true"><span class="flag-icon flag-icon-gr"></span></a>
<ul class="dropdown-menu text-left" aria-labelledby="dropdownMenu1">
<li><a href="#" data-value="action"><span class="ml-2 label label-default"><span class="flag-icon flag-icon-gr"></span>Greece</span> </a> </li>
<li><a href="#" data-value="another action"><span class="ml-2 flag-icon flag-icon-fr"></span> <span>France</span></a></li>
<li><a href="#" data-value="something else here"><span class="ml-2 flag-icon flag-icon-us"></span> <span>United States</span></a></li>
<li><a href="#" data-value="separated link"><span class="ml-2 flag-icon flag-icon-es"></span><span> España</span></a></li>
</ul>
</li>
<li><a href="#" data-signin="login" class="Loginbtn font-weight-bold btn navbar-btn px-md-4 px-sm-2 px-xs-1">Log in</a></li>
<li><a href="#" data-signin="signup" class="signupbtn text-white font-weight-bold btn navbar-btn px-md-4 px-sm-2 px-xs-1 ml-md-2 ml-sm-1 btn-secondary">Sign up</a></li>
</ul>
</div>
</nav>
If you would like to experiment with the code, feel free to check out this Fiddle: https://jsfiddle.net/stvu5ckj/1/
Inspired by the website www.nextdoor.com, my goal is to replicate a similar functionality that seamlessly transitions between the Flag Icons and corresponding text upon user interaction.