Kazik Kazik - 7 months ago 35
jQuery Question

How to select next ul on click event using jQuery

I was looking in other questions, but I couldn`t find answer.

I have code like this:

<div class="chacter_form">
<form id="new_character" class="new_character" method="post" accept-charset="UTF-8" action="/users/1/characters">
<ul class="no_dot form_partial active_partial"></ul>
<ul class="no_dot hide form_partial test"></ul>
<ul class="no_dot hide form_partial"></ul>
<button id="prev_form_button"></button>
<button id="next_form_button"></button>

Of course every
has some number of
. I want to write a jQuery function that when
is clicked it will hide first
and show the second.
class set display to none.

This is my attempt but it is not working:

$(document).on('click', '#next_form_button', function(){
$active_partial = $('ul.active_partial')
$next_partial = $('ul.active_partial').next('ul')

Any help would be appreciated


Use can use :visible selector to finding visible ul and use next() to finding next ul.

    if ($("ul:visible").index() < 2)

    if ($("ul:visible").index() > 0)
ul:nth-child(3) {
    display: none;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="prev">Prev</button>
    <button id="next">Next</button>