How i access to the second ul tag on css to change style with javascript

December 30, 2022

i have this html code:

        <div class="login">
            <ul class="preLogin" > 
                <div>
                    <li>
                        <input type="text" class="Nombre" id="name" placeholder="Usuario.."></li>  
                </div>
                <div>
                    <li>
                        <input type="password" class="pass" id="pass" placeholder="Contraseña.."></li>
                    </div>
                <div class="botonLogin" id="BotonLogin"><p>Entrar</p></div>
            </ul>
            <ul >
                <div>
                    <img src="./img/admin.png" alt="adminIcon" class="adminIcon" id="adminIcon">
                    <p class="textoPostLogin">¡Hola administrador!</p>
                </div>
            </ul>
        </div>

this is the CSS

.preLogin{
  display: none;
}



.postLogin{
  display: none;

this is the file .js

jQuery('document').ready(function ($) {   
    var btnLogin = $('.botonLogin'),
    menu = $('.login ul');
    btnLogin.click(function(){
        
        var name=document.getElementById("name").value;
        var pass=document.getElementById("pass").value;
        if (name == "admin" && pass=="admin"){
            window.alert("Bienvenido a nuestro sitio web");
            menu.addClass('preLogin');
            menu.removeClass('postLogin');
        }
    });
});

what i want is do the same what the before js does but this time with the second ul:
enter image description here
i dont know how to access to that ul to put the css style postlogin to hidde o show the second ul.

thank you!!

i want to know how to acces the second UL to change the css style

>Solution :

You can use CSS nth-child.

Like this

var secondUl = $('.login ul:nth-child(2)');

// add and remove class
secondUl.addClass('postLogin');
secondUl.removeClass('preLogin');

Demo

const $ = document.querySelector.bind (document)

var secondUl = $('.login ul:nth-child(2)');
console.log (secondUl)

// add you logic here

<body>
  <div class="login">
            <ul class="preLogin" > 
                <div>
                    <li>
                        <input type="text" class="Nombre" id="name" placeholder="Usuario.."></li>  
                </div>
                <div>
                    <li>
                        <input type="password" class="pass" id="pass" placeholder="Contraseña.."></li>
                    </div>
                <div class="botonLogin" id="BotonLogin"><p>Entrar</p></div>
            </ul>
            <ul >
                <div>
                    <img src="./img/admin.png" alt="adminIcon" class="adminIcon" id="adminIcon">
                    <p class="textoPostLogin">¡Hola administrador!</p>
                </div>
            </ul>
        </div>
</body>