Good morning fellow coders, I am having a problem with an html (ul) list, which contains li elements, what I want to do is hide all the li elements of that ul list except for a li that contains an id, for this we can perform with the help of jquery or javascript, but I don't understand how to do it, if someone can help me or advise me on how to solve the problem, I would greatly appreciate it.
The ul list is the one with the id "rFe3", and I want to hide all the li inside this list except the li that contains the id "infoCursos".
<ul id="rFe3" class="nMods flist">
<li>
<label> <input type="checkbox" name="tot" value="T" class="ios-switch">
<div class="switch"></div> Totales
</label>
</li>
<li>
<label> <input type="checkbox" name="reg" value="R" class="ios-switch">
<div class="switch"></div> Registrados
</label>
</li>
<li>
<label> <input type="checkbox" name="ing" value="I" class="ios-switch">
<div class="switch"></div> Ingresos
</label>
</li>
<li>
<label> <input type="checkbox" name="eva" value="E" class="ios-switch">
<div class="switch"></div> Evaluaciones
</label>
</li>
<li id="infoCursos">
<label> <input type="checkbox" name="infoCursos" value="IC" class="ios-switch">
<div class="switch"></div> Información Cursos
</label>
</li>
</ul>
Note: I cannot put id to the li that do not have it since this content may vary over time and I do not see it viable every time a new option is added to add a new id.
You add a class and in css you hide them with that class, every time you add an element, you add the class if you want to add it hidden. With a loop you can assign the class to hide and with an if condition that if the element has id InfoCursos then do not add the class.
Another alternative can be with css without the need to add anything else.
In case you only want it to affect the li in the list: