How to make select checkbox hidden until input is clicked?

Question

JavaScript

Hello dear!

There is a form code - in short

<div class="input">
                            <input type="text" name="name" required>
                            <span>Ваше имя</span>
                        </div>
                        <!--  -->
                        <div class="input">
                            <input type="text" name="phone" required>
                            <span>Номер телефона</span>
                        </div>

                        <div class="input">
                            <input type="text" name="phone" required>
                            <span>Ваш город</span>
                            <select name="form_select">
                                <option value="Nur-sultan" selected="selected">Нур-Султан</option>
                                <option value="Karaganda" >Караганда</option>
                            </select>

And there are also styles that make Input clickable.


Is it possible to make it so that when you click on the Input of the city, you can make it so that it becomes visible and one turn before pressing ?

Answer 1

Since the Bitrix tag, we do on it:

<select id="city" name="form_select" class="hidden" >
  <option value="Nur-sultan" selected="selected">Нур-Султан</option>
  <option value="Karaganda">Караганда</option>
</select>

.hidden {
  display: none;
}

BX.ready(function() {
  BX.bind(BX('city'),  'click',  () => {
    BX.removeClass(BX('city'), 'hidden');
  });
});