jQuery toggleClass example

Toggle class name on click in jQuery

by Luis Martin

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/js/bootstrap.min.js"></script>
<div class="row" id="header" style="width:100%; height: 100px; vertical-align: bottom; background-color: #303948!important"> 
  <div class="flex-container">
    <div id="idioma" class="align-self-center pull-right" style="padding-left: 10px; padding-right: 10px; ">

      <select class="selectImagen">
        <option data-thumbnail="https://cdn.countryflags.com/thumbs/portugal/flag-800.png">
          Português
        </option>
        <option data-thumbnail="https://cdn.countryflags.com/thumbs/spain/flag-800.png">
          Español
        </option>
      </select>

      <div class="lang-select">
        <button class="btn-select" value=""></button>
        <div class="b">
          <ul id="a"></ul>
        </div>
      </div>

    </div>
  </div>
</div>



<div id="main" role="main" style="margin-left: 60px; display: block;">
        

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/css/index.css">
<script src="https://cdn.jsdelivr.net/npm/simple-keyboard@latest/build/index.min.js"></script>


<div id="content" class="container">
    <div class="row">        
        <div class="col-sm-3">

        </div>
        <div class="col-xs-12 col-sm-12 col-md-5 col-lg-5" style="align-content:center">
            
            <div id="imagenDiv" style="display:block; width:auto">
                <img src="" alt="LogoCliente" style="width:100%; height:auto">
            </div>
            <div class="well no-padding">
                <form action="/account/login" method="POST" id="login-form" class="smart-form client-form" novalidate="novalidate">
                    <header>
                        Inicio de sesión
                    </header>
                    <input id="ReturnUrl" name="ReturnUrl" type="hidden" value="/">
                    <input name="__RequestVerificationToken" type="hidden"...

CSS

/** Añadidas por el chache **/



.b {
  position: absolute;
    background: white;
}












/*Select con imagen*/
.selectImagen {
	display: none;
}

#a {
	padding-left: 0px;
}

	#a img, .btn-select img {
		width: 63px;
	}

	#a li {
		list-style: none;
		padding-top: 5px;
		padding-bottom: 5px;
		background-color: #fff;
	}

		#a li:hover {
			background-color: #F4F3F3;
		}

		#a li img {
			margin: 5px;
		}

		#a li span, .btn-select li span {
			margin-left: 10px;
			margin-right: 10px;
		}

/* item list */

.b {
	display: none;
	width: 100%;
	max-width: 350px;
	box-shadow: 0 6px 12px rgba(0,0,0,.175);
	border: 1px solid rgba(0,0,0,.15);
	border-radius: 5px;
}

.open {
	display: show !important;
}

.btn-select {
	margin-top: 10px;
	width: 100%;
	max-width: 350px;
	height: 54px;
	border-radius: 5px;
	background-color: #fff;
	border: 1px solid #ccc;
}

	.btn-select li {
		list-style: none;
		float: left;
		padding-bottom: 0px;
	}

	.btn-select:hover li {
		margin-left: 0px;
	}

	.btn-select:hover {
		background-color: #F4F3F3;
		border: 1px solid transparent;
		box-shadow: inset 0 0px 0px 1px #ccc;
	}

	.btn-select:focus {
		outline: none;
	}

.lang-select {
	margin-left: 50px;
}

JavaScript

var langArray = [];
	$('.selectImagen option').each(function () {
		var img = $(this).attr("data-thumbnail");
		var text = this.innerText;
		var value = $(this).val();
		var item = '<li><img src="' + img + '" alt="" value="' + value + '"/><span>' + text + '</span></li>';
		langArray.push(item);
	})

	$('#a').html(langArray);

	//Set the button value to the first el of the array
	$('.btn-select').html(langArray[0]);
	$('.btn-select').attr('value', 'en');

	//change button stuff on click
	$('#a li').click(function () {
		var img = $(this).find('img').attr("src");
		var value = $(this).find('img').attr('value');
		var text = this.innerText;
		var item = '<li><img src="' + img + '" alt="" /><span>' + text + '</span></li>';
		$('.btn-select').html(item);
		$('.btn-select').attr('value', value);
		$(".b").toggle();
		//console.log(value);
	});

	$(".btn-select").click(function () {
		$(".b").toggle();
	});