1

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!

Bill Bronson
  • 530
  • 2
  • 9
  • 24

1 Answers1

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>
Every Screamer
  • 520
  • 2
  • 7
  • what should i use when the button is deeper nested inside and i need to traverse way more up? parent() seems to only get the direct parent. – Bill Bronson Aug 27 '19 at 11:35
  • 1
    @BillBronson you can use .parent().parent().parent() if you know it has 3 parent elements... etc.. but that only works if your button is allways nested in the same number of parents :) – Every Screamer Aug 27 '19 at 11:40
  • lets say the parent i want has got the class "toplevel". How can i travel up to it and back down to my description? – Bill Bronson Aug 27 '19 at 11:41
  • 1
    .closest("toplevel").find('.zutdescr') but only if in that toplevel parent is only one desc. Maybe you could add some data-atrubutes like data-target and then match the elements by them :) – Every Screamer Aug 27 '19 at 11:49
  • i updated my snippet with your suggestions but theres still the problem that jQuery always chooses the first .zutdescr even when i click the other ones. – Bill Bronson Aug 27 '19 at 11:54
  • 1
    @BillBronson i changed my snippet. Now it works like you want to. It takes the index(number position of iteration) and looks for same position in parent = toplevel for zutdescr and then iterating trough them looks for same position :) and does what you need then. Hope it helps. – Every Screamer Aug 27 '19 at 12:34