Need help to reduce a code (i'm not an expert)

Question

I am creating a condition to display a few div and hide others at the launch of a function. This is the code I opted for, would it be possible to reduce it?

if (select.value=="v-smartphones-modele-samsungs6"){
          document.getElementById('div-smartphone-result-apple').style.display = "none";
          document.getElementById('div-smartphone-result-samsung').style.display = "block";
          document.getElementById('div-smartphone-marque').style.display = "block";
          document.getElementById('div-smartphone-marque-samsung').style.display = "block";
          document.getElementById('div-smartphone-grade-samsung').style.display = "block";
          document.getElementById('div-tablettes').style.display = "none";
          
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs6-capacite').style.display = "block";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs6edge-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs6edgeplus-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs7-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs7edge-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs8-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs8plus-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs9-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs9plus-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs10-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs10plus-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs10e-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs20-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs20plus-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs20ultra5g-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsungs20fe-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsunggalaxyfold-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsunggalaxyzflip-capacite').style.display = "none";
          document.getElementById('div-smartphone-marque-samsung-modele-samsunggalaxyzfold2-capacite').style.display = "none";
         
         
          document.getElementById('div-grade-samsungs6').style.display = "block";
          document.getElementById('div-grade-samsungs6edge').style.display = "none";
          document.getElementById('div-grade-samsungs6edgeplus').style.display = "none";
          document.getElementById('div-grade-samsungs7').style.display = "none";
          document.getElementById('div-grade-samsungs7edge').style.display = "none";
          document.getElementById('div-grade-samsungs8').style.display = "none";
          document.getElementById('div-grade-samsungs8plus').style.display = "none";
          document.getElementById('div-grade-samsungs9').style.display = "none";
          document.getElementById('div-grade-samsungs9plus').style.display = "none";
          document.getElementById('div-grade-samsungs10').style.display = "none";
          document.getElementById('div-grade-samsungs10plus').style.display = "none";
          document.getElementById('div-grade-samsungs10e').style.display = "none";
          document.getElementById('div-grade-samsungs20').style.display = "none";
          document.getElementById('div-grade-samsungs20plus').style.display = "none";
          document.getElementById('div-grade-samsungs20ultra5g').style.display = "none";
          document.getElementById('div-grade-samsungs20fe').style.display = "none";
          document.getElementById('div-grade-samsunggalaxyfold').style.display = "none";
          document.getElementById('div-grade-samsunggalaxyzflip').style.display = "none";
          document.getElementById('div-grade-samsunggalaxyzfold2').style.display = "none";
         
          document.getElementById('div-smartphone-result-samsungs6').style.display = "block";
          document.getElementById('div-smartphone-result-samsungs6edge').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs6edgeplus').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs7').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs7edge').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs8').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs8plus').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs9').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs9plus').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs10').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs10plus').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs10e').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs20').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs20plus').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs20ultra5g').style.display = "none";
          document.getElementById('div-smartphone-result-samsungs20fe').style.display = "none";
          document.getElementById('div-smartphone-result-samsunggalaxyfold').style.display = "none";
          document.getElementById('div-smartphone-result-samsunggalaxyzflip').style.display = "none";
          document.getElementById('div-smartphone-result-samsunggalaxyzfold2').style.display = "none";

          
         }

Answer 1

If you do not want change HTML structure by grouping with classes you can do a lot with CSS [attribute^=value] Selector and querySelectorAll JS selector.

Example using div-smartphone- part of id, and excluding some:

document.querySelectorAll('div[id^="div-smartphone-"]:not(#div-smartphone-result-apple)').forEach(el => {
  el.style.color = "red";
})

<div id="div-smartphone-marque-samsung-modele-samsungs6edge-capacite">div-smartphone-marque-samsung-modele-samsungs6edge-capacite</div>
<div id="div-smartphone-result-samsung">div-smartphone-result-samsung</div>
<div id="div-smartphone-marque">div-smartphone-marque</div>
<div id="div-smartphone-marque-samsung">div-smartphone-marque-samsung</div>
<div id="div-smartphone-grade-samsung">div-smartphone-grade-samsung</div>
<div id="div-smartphone-marque-samsung-modele-samsungs6edge-capacite">div-smartphone-marque-samsung-modele-samsungs6edge-capacite</div>
<div id="div-smartphone-result-apple">div-smartphone-result-apple</div>

This way your code can be summed in couple of lines.

EDIT:

To answer question in comment. Yes, you can do all kind of combinations, please read: CSS Selectors for full list of selector, and you can use all in queryselector, and combinations of it.

Example

querySelectorAll('div[id^="div-smartphone-marque-samsung-modele-"][id$="-capacite"]:not([id*="SAMSUNGMODEL1"])')

Code above does next:

• div[id^="div-smartphone-marque-samsung-modele-"] this part takes all elements that id starts with: div-smartphone-marque-samsung-modele-

• [id$="-capacite"] this part takes all that ends with -capacite

• :not([id*="SAMSUNGMODEL1"] this part excludes ids that contains SAMSUNGMODEL1

So all of those 3 together give you filter that you need:

document.querySelectorAll('div[id^="div-smartphone-marque-samsung-modele-"][id$="-capacite"]:not([id*="SAMSUNGMODEL1"])').forEach(el => {
  el.style.color = "red";
})

<div id="div-smartphone-marque-samsung-modele-nokia-capacite">div-smartphone-marque-samsung-modele-nokia-capacite</div>
<div id="div-smartphone-marque-samsung-modele-apple-capacite">div-smartphone-marque-samsung-modele-apple-capacite</div>
<div id="div-smartphone-marque-samsung-modele-SAMSUNGMODEL1-capacite">div-smartphone-marque-samsung-modele-SAMSUNGMODEL1-capacite  *has SAMSUNGMODEL1</div>
<div id="div-smartphone-marque-samsung-modele-sonny-capacite">div-smartphone-marque-samsung-modele-sonny-capacite</div>
<div id="div-smartphone-marque-samsung-modele-SAMSUNGMODEL1">div-smartphone-marque-samsung-modele-SAMSUNGMODEL1 *missing -capacite</div>

Answer 2

If you have created those id in your HTML, you should give them a class, and then on your JavaScript, you can document.getElementByClassName and set all their style to block

French :

Salut, je vois que tu es Fr ^^ Deja bienvenu à toi,

Si t'as avez créé ces id dans ton HTML, tu dois leur donner une classe, puis sur ton JavaScript, tu peux document.getElementByClassName et définir tous leurs style.