jQuery: TabAccordion - How to find the next element in DOM from clicked this

Question

I want the user to click on a link in a certain area and the next element with the class .zutdescr in the DOM should open/close.

Unfortunately I have problems selecting the right element

I build a simple Example for better understanding.

$('.rev-btn').click(function() {
            var $zutdescription = $(this).closest('div').find('.zutdescr').first();
            $zutdescription.toggleClass('ausgefahren');
});

.zutdescr {
    height: 0;
    overflow: auto;
    color: red;
}

.ausgefahren{
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toplevel">
  <ul>
    <li class="rev-btn">1</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">2</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">3</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
</div>

i tried next() and nextAll() but that doesnt work at all.

Thanks for any help!

Answer 1

$('.rev-btn').click(function() {
	var position = $('.rev-btn').index(this);
var elementToToggle = $('.toplevel').find('.zutdescr');


   	elementToToggle.each(function( index ) {
	if(index == position){
		$(this).toggleClass('ausgefahren');
	}
  		
});
});

.zutdescr {
    height: 0;
    overflow: auto;
    color: red;
}

.ausgefahren{
    height: auto;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="toplevel">
  <ul>
    <li class="rev-btn">1</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">2</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
  <ul>
    <li class="rev-btn">3</li>
  </ul>
  <ul>
    <li class="zutdescr">Descr</li>
  </ul>
</div>