0

I'm trying to build in a button to expand a list in a list of div elements.

$('.expandAllfixVersionList').click(function () {

                $('.fixVersionList').find('.issue').animate({height: $('.fixVersionList').children('.version')[0].scrollHeight}, 500);
                $('.fixVersionList').find('.issue').animate({'overflow': 'visible'}, 500);

            });

Here I got the problem that he shows the first fixVersionListElement correct and all folowing get the same height, even if they got more or less Issues in them. So they might get cut off or be way to big. Can I make this in a way that he addresses the animation dynamic to the correct height?

The structure of the HTML is like this:

<div class="content">
    <div class="fixVersionList">...</div>
    ...
    <div class="fixVersionList">
        <ul class="issue">
            <li>
            </li>
        </ul>
        <ul class="issue">...</ul>
        ...
    </div>
</div>
Paolo Forgia
  • 6,572
  • 8
  • 46
  • 58
Frankenstein
  • 653
  • 9
  • 18

3 Answers3

2

Hi I recreated your existing code, please let me know if this helps you 

$('.expandAllfixVersionList').click(function () {

  $('.fixVersionList').each(function( index, value ) {
  $(value).find('.issue').animate({height:  $(value).children()[0].scrollHeight}, 500);
  $(value).find('.issue').animate({'overflow': 'visible'}, 500);
  });
});
.issue{
  height:0px;
  overflow:hidden;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<button class="expandAllfixVersionList">asads</button>
<div class="content">
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>
Naren Murali
  • 19,250
  • 3
  • 27
  • 54
  • Its very helpful thanks! In my case i additionally got multiple
    with different numbers of issues.
     – Frankenstein Aug 07 '17 at 09:07
  • @FrankS. is this what's needed? – Naren Murali Aug 07 '17 at 09:16
  • Still got the same Problem: the 2nd fixVersionList gets cut off because its bigger (got more issues). Im guessing this Part is wrong: $(value).find('.issue').animate({height: $('.fixVersionList').children()[0].scrollHeight}, 500); – Frankenstein Aug 07 '17 at 09:32
  • I still have problems with this, now i only get shown one issue when i click the expand button. I also tried parent instead of children in the animation but it gets way to big. Which element is $(value).children()[0].scrollHeight adressing? – Frankenstein Aug 07 '17 at 10:32
  • @FrankS. Without a jsfiddle or codepen containing the actual issue, I can help you only upto this level. – Naren Murali Aug 07 '17 at 10:40
  • @FrankS. Took a lot of time but finally made it https://jsfiddle.net/Kai_Draord/fmggnrao/4/ This fiddle contains css fixes and javascript fixes for the issues, please check it out. https://jsfiddle.net/Kai_Draord/yydaf2w4/1/ for only the expand all fix. Thanks for the fun project – Naren Murali Aug 07 '17 at 20:09
  • @FrankS. please look into [jquery animate stop](https://stackoverflow.com/questions/14613498/how-to-prevent-this-strange-jquery-animate-lag) if we do the animation multiple times, there is some sort of lag in the page – Naren Murali Aug 08 '17 at 07:25
  • Thanks again, the solution from your fiddle is better. The animate stop is also good to know. – Frankenstein Aug 09 '17 at 10:35
0

Based on Naren Murali´s answer i managed to get it working with this:

$('.expandAllfixVersionList').click(function () {

                $('.fixVersionList').each(function( index, value ) {
                    var count = $(this).find('li').length;
                    $(value).find('.issue').animate({height:    $(value).children()[0].scrollHeight*count}, 500);
                    $(value).find('.issue').animate({'overflow': 'visible'}, 500);
                });
            });

Im gonna accept your answer, thank you very much.

Frankenstein
  • 653
  • 9
  • 18
0

To simplify your code a bit, you can also use slideToggle(). First list is has more items to show, you won't have to worry about figuring out what height to animate.

$('.expandAllfixVersionList').click(function () {

  $('.fixVersionList').each(function( index, value ) {
      $(value).find('.issue').slideToggle();
  });
});
.issue{
  display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="expandAllfixVersionList">toggle</button>
<div class="content">
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
    <div class="fixVersionList">
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
        <ul class="issue">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
        </ul>
    </div>
</div>
Donald Powell
  • 744
  • 5
  • 10