How to display text in each list using jquery?

Question

JavaScript

Hello. I have a list in my code

<ul>
 <li>
  <span class="main">Клик</span>
  <span class="nline">.....</span>
 </li>
 <li>
  <span class="main">Клик</span>
  <span class="nline">.....</span>
 </li>
</ul>

how to write in jquery in one line so that it is displayed one by one, i.e. clicked on 2 list text got out from the 2nd. I can’t find it on the Internet, there is about a selective choice). I tried it myself, but I either have all or not one

$('.nline').hide();

  $('.main').on('click', function(i){
    // $(this).addClass('lidown');
    $('.nline').eq(i).slideToggle();
  });

And I also added a picture via list-style: i.e. open list, closed list (triangle) and also I can’t either through jquery

li {
  list-style: url('img/Up.png');
}
.lidown{
  list-style: url('img/down.png');
}

What to do with 2 problems?

Answer 1

$('ul').on('click', '.main', function(i){
  $(this).next('.nline').slideToggle();
});

random accidents