I have a web page in which I use sql/php to create a select where options are in my database : the value of each option is the id on the database.
With this, I use JQuery 3.3.1 : this is the first time I'm using it so I think my syntax might be bad.

First of all there is 2 type of datas : about price and about time.
I made 2 radio button and when the "price" button is checked, the price list is shown while the time list is hidden.

This part of the code works fine on FF/IE/Chrome.

Now I want to display more informations about the option selected so I made a div for every option with style='display:none' and when the option is selected I show the div where the id of the div = the value of the option.

This part of the code works fine on FF/IE but not Chrome.

Here's my code, I replaced database calls by just writing few examples of what I can get here : 

```js
$(document).ready(function() {
    $('input[type="radio"]').click(function() {
        if ($(this).attr("value") == "prix") {
            $("#prix").show('fast');
            $("#temps").hide('fast');
            $("#" + $(this).attr("value") + "_prix").siblings().hide('fast');
            $("#" + $(this).attr("value") + "_prix").show('fast');
        }
        if ($(this).attr("value") == "temps") {
            $("#prix").hide('fast');
            $("#temps").show('fast');
            $("#" + $(this).attr("value") + "_temps").siblings().hide('fast');
            $("#" + $(this).attr("value") + "_temps").show('fast');
        }
    });
    $('input[type="radio"]').trigger('click');
});

function showDetailsCriterePrix(id) {
    $("#" + id + "_prix").siblings().hide('fast');
    $("#" + id + "_prix").show('fast');
}

function showDetailsCritereTemps(id) {
    $("#" + id + "_temps").siblings().hide('fast');
    $("#" + id + "_temps").show('fast');
}
```

```html
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<br><br> Le critère à supprimer concerne le :
<input type="radio" name="cat_critere" value="temps" required>Temps
<input type="radio" name="cat_critere" value="prix" checked required>Prix
<div id="prix" style="display:none">
   <br><br> Choisissez un critère de prix à supprimer :
   <select name="idToDelPrix">
      <option value="1" onclick='showDetailsCriterePrix(this.value);'>Nombre de caisses [AVE] </option>
      <option value="2" onclick='showDetailsCriterePrix(this.value);'>Nombre d'associés [AVE] </option>
      <option value="3" onclick='showDetailsCriterePrix(this.value);'>Nombre de salariés [AVE] </option>
      <option value="4" onclick='showDetailsCriterePrix(this.value);'>Nombre de TVA [AVE] </option>
   </select>
   <div id="wrapperPrix">
      <div id="1_prix" style="display:none"> Taux prix : 175<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
      <div id="2_prix" style="display:none"> Taux prix : 100<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
      <div id="3_prix" style="display:none"> Taux prix : 100<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
      <div id="4_prix" style="display:none"> Taux prix : 1<br> Taux abattement prix : 0<br> Champ obligatoire : Oui</div>
   </div>
</div>
<div id="temps" style="display:none">
   <br><br> Choisissez un critère de temps à supprimer :
   <select name="idToDelTemps">
      <option value="1" onclick='showDetailsCritereTemps(this.value);'>Temps1 [AVE] </option>
      <option value="2" onclick='showDetailsCritereTemps(this.value);'>Temps2 [AVE] </option>
      <option value="3" onclick='showDetailsCritereTemps(this.value);'>Temps3 [AVE] </option>
      <option value="4" onclick='showDetailsCritereTemps(this.value);'>Temps4 [AVE] </option>
   </select>
   <div id="wrapperTemps">
      <div id="1_temps" style="display:none"> Taux temps : 175<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
      <div id="2_temps" style="display:none"> Taux temps : 100<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
      <div id="3_temps" style="display:none"> Taux temps : 100<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
      <div id="4_temps" style="display:none"> Taux temps : 1<br> Taux abattement temps : 0<br> Champ obligatoire : Oui</div>
   </div>
</div>
```

I don't know why this is not working on Chrome, I tried to replace the .click by .change, I tried with and without parameters in hide()/show().

If you guys have any idea it would be very kind ! 

(Sorry, my code is in French but I think it's understandable even if you don't know French!)

**EDIT** : Answered by [reporter](https://stackoverflow.com/users/326807/reporter) in the comments, thank you very much !

Instead of using show()/hide() we can use toggleClass(). In this case I had to :

1- Create a css class with "display:none;"

2- Replace the style of my divs with this class

[2.5- Add an id to my selects (should have done this before) ]

3- Add an event on my selects that get the value of the selected option and toggle the class of the div with the same id.

4- Remove the now useless showDetailsCriteres functions