Find the first tag after a class name and change it with jquery

Question

I’d like to identify the first class='active' in my html and after adding a value in the element class <ul> but only the first <ul>

My HTML

    <aside class="navigation">
            <nav>
                <ul class="nav teste-nav">
                    <li class="active">     //AQui primeiro active
                        <a href="#categoria1" data-toggle="collapse" aria-expanded="false">
                            Cat. 01<span class="sub-nav-icon"> <i class="stroke-arrow"></i> </span>
                        </a>
//mudar essa ul
                        <ul id="categoria1" class="nav nav-second collapse in">
                            <li><a href="#"> Países</a></li>
                            <li class="active"><a href="#"> Estados</a></li>
                            <li><a href="#"> Cidades</a></li>
                            <li><a href="#"> Bairros</a></li>
                            <li><a href="#"> Logradouros</a></li>
                        </ul>
                    </li>
                    <li class="">
                        <a href="#categoria2" data-toggle="collapse" aria-expanded="false">
                            Cat 02<span class="sub-nav-icon"> <i class="stroke-arrow"></i> </span>
                        </a>
                        <ul id="categoria2" class="nav nav-second collapse">
                            <li><a href="#"> Países</a></li>
                            <li><a href="#> Estados</a></li>
                            <li><a href="#"> Cidades</a></li>
                            <li><a href="#"> Bairros</a></li>
                            <li><a href="#"> Logradouros</a></li>
                        </ul>
                    </li>
                </ul>
            </nav>
        </aside>

I would like to with jquery identify the first li classy active and when identifying to change the class of the a href for nav nav-second collapse in

I’m trying to do like this:

$(".active").after(function () {
     $("ul").toggleClass("in");
});

but it puts the 'in' in all the following ul.

tried as well:

$("ul:first").toggleClass("in");

or

$("ul").fir.toggleClass("in");

But does not add in.

Answer 1

Try it this way:

$(".active").after(function () {
    $(this).find("ul:first").toggleClass("in");
});

Can do direct too:

$('.active ul:first').toggleClass('in');