How to do that by clicking on the language selection icon, a list of available languages drops out?

Question

How to do that by clicking on the language selection icon, a list of available languages (UA, EN, IT) drops out. When you click on one of them, the list of languages is hidden and the selected one appears in this icon?

    header .leftSide,
    header .rightSide
    {
        display: flex;
        align-items: center;
    }

    <div class="language">
    <ul>
      <li><a id="LANG" href="#">RU</a></li>
      <li><a id="LANG" href="#">ENG</a></li>
      <li><a id="LANG" href="#">IT</a></li>
    </ul>
</div>

enter image description here

`by clicking on the language selection icon` what do you mean? What to click? — לבני מלכה, Nov 04 '18 at 10:51
@לבנימלכה To drop out the list of languages, and apply the selected — Ksivilian Yavorskii, Nov 04 '18 at 10:54
@לבנימלכה Ok) But how to make a drop-down list?) But not in the usual ul> li — Ksivilian Yavorskii, Nov 04 '18 at 10:57
do you mean select:https://www.w3schools.com/tags/tag_select.asp — לבני מלכה, Nov 04 '18 at 10:59
https://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_button — Tobi696, Nov 04 '18 at 11:03
Possible duplicate of [Html two language option with button (without having to redirect to different page )](https://stackoverflow.com/questions/53021813/html-two-language-option-with-button-without-having-to-redirect-to-different-pa) — A. Meshu, Nov 04 '18 at 11:04

score 0 · Accepted Answer · answered Nov 04 '18 at 11:03

Use .click() a and in function hide() list and style li as below:

$('.a-tag').click(function() {
  $('.language').hide();
});

li{
    border-radius: 50%;
    border: 1px solid black;
    padding: 5px;
    margin: 5px;
    width: fit-content;
    list-style-type: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="language">
    <ul>
      <li><a id="LANG1" class="a-tag" href="#">RU</a></li>
      <li><a id="LANG2" class="a-tag" href="#">ENG</a></li>
      <li><a id="LANG3" class="a-tag" href="#">IT</a></li>
    </ul>
</div>

that what you mean? – לבני מלכה Nov 04 '18 at 11:03 — לבני מלכה, Nov 04 '18 at 11:03

How to do that by clicking on the language selection icon, a list of available languages drops out?

1 Answers1