I want to hide the small

Question

I have a select that has one with descriptive text. I need it to be hidden when you click the select and open the list of options, but it will be visible again when you click the select, or one of the options in the list.

<div id="select-default" class="select-box">
  <div class="options-container">
    <div class="option">
      <input type="radio" class="radio" id="label41" name="opcoes" />
      <label class="label-opcao" for="label41">label 41</label>
    </div>
    <div class="option">
      <input type="radio" class="radio" id="label42" name="opcoes" />
      <label class="label-opcao" for="label42">label 42</label>
    </div>
    <div id="selected-default" class="selected selected-erro" onclick="ocultar ('conteudo')">
      selecione...
    </div>
    <p id="label-select-erro" class="label-select">label</p>
  </div>
  <div id="conteudo">
    <div class="div-mensagem-select">
      <small class="mensagem-select text-roxo float-left">
        <p>Mensagem de erro</p>
      </small>
  </div>
 </div>

I used this function....

<script>
function ocultar(el) {
    var display = document.getElementById(el).style.display;
    if(display == "none")
        document.getElementById(el).style.display = 'block';
    else
        document.getElementById(el).style.display = 'none';
}

</script>

The way it is it is again visible when you click the second select, but it is not visible when you click on one of the options....

Answer 1

Do the check like this:

if (display !== 'block')

It needs to be done this way because the value of style.display by default comes blank - and is not affected by definitions made via CSS.