JSFiddle - React, Tailwind, and code Playground

by Kai_Draord

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 <body> 
  <div> 
   <div class="header clearfix"> 
    <div class="title"> 
     <h1>Release Notes</h1> 
    </div> 
    <div id="sumIssues"></div> 
    <div id="completedIssues"></div> 
    <div id="uncompletedIssues"></div> 
    <div style="" class="quickActions">
      <ul>
        <li class="collapseAllfixVersionList">Collapse all</li>
        <li class="expandAllfixVersionList">Expand all</li>
      </ul>
    </div>
   </div> 
  </div> 
  <div class="content"> 
   <div class="fixVersionList"> 
    <div class="version unreleased"> 
     <h2><span>Version 1</span> <span class="date"></span> </h2> 
     <ul class="issue"> 
      <li> 
       <div class="completed feature"> 
        <div class="expanddescription"> 
         <h3><span>⇓ Expand full description ⇓</span></h3> 
        </div> 
        <div class="issuelink"> 
         <span><a>Issue 1</a></span> 
        </div> 
       </div> 
          <div class="description"> 
            <div class="wrapper">
              <div>this is a test with more than one row</div> 
               <div>this is a test with more than one row</div> 
               <div>this is a test with more than one row</div> 
            </div>
          </div> 
       </li> 
     </ul> 
    </div> 
   </div> 
  
   <div class="fixVersionList"> 
    <div class="version unreleased"> 
     <h2><span>Version 2</span> <span class="date"></span> </h2> 
     <ul class="issue"> 
      <li> 
       <div class="uncompleted bugfix"> 
        <div class="expanddescription"> 
         <h3><span>⇓ Expand full description ⇓</span></h3> 
        </div> 
        <div class="issuelink"> 
         <span>Ticket 4</span> 
        </div> 
       </div> 
       <div class="description"> 
       <div class="wrapper">
         <span></span> 
       </div>
        </div> 
       </li> 
      <li> 
       <div class="completed bugfix"> 
        <div...

CSS

<style>
        :root {
            --released-color: green;
            --unreleased-color: darkorange;
            --page-color: #f0f0f0;
            --version-color: white;
        }

        body {
            margin: 0;
            font-family: "Circular Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
            color: #205081;
            padding: 3.5rem 10rem 0 10rem;
        }

        h2 {
            padding-left: 10px;
        }

        h2:after {
            padding-bottom: 1rem;
        }

        a {
            color: black;
        }
        /* addded classes */
        .clearfix{
          overflow:auto;
        }
        .wrapper{
          height:100%;
        }
        ul.issue > li > div:first-child{
          display:flex;
          justify-content: center;
          align-items:center;
        }
        /* addded classes */
        .version {
            background-color: var(--version-color);
            margin: 10px;
            padding: 1rem;
        }

        .issue {
            margin-right: 20px;
            margin-top: 0px;
            list-style: none;
            overflow: hidden;
            height: 0;
            margin-bottom: 0px !important;
        }

        .issue li{
            padding: 1rem 0px .5rem .25rem;
        }

        .legend {
            float: right;
            width: auto;
            font-weight: bold;
            padding-top: 10px;
            padding-right: 10px;
        }

        .legendversion {
            padding-top: 5px;
            padding-bottom: 5px;
        }

        .legendreleased {
            color: white;
            background-color: var(--unreleased-color);
            border-radius: 5px;
            padding-left: 5px;
            padding-right: 5px;
            float: left;
            font-size: smaller;
            margin: 0 10px 0 10px;
        }

        .legendunreleased {
            color: white;
            background-color: #358BBA;
            padding-left: 5px;
       ...

JavaScript

$(document).ready(function () {

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

                var versionSelector = $(this).parent().next();
                var adjustingContainer = $(this).parent().parent().parent('.issue');
								console.log(versionSelector);
								console.log($(this).parent().parent().parent('.issue'));
                console.log(versionSelector.children()[0].scrollHeight);
                console.log("versionSelector.css('height')", versionSelector.css('height'));
                if (versionSelector.css('height') == '0px') {
                    versionSelector.animate({height: versionSelector.children()[0].scrollHeight}, 500);
                    $(this).parent().parent().parent('.issue').animate({height: versionSelector.children()[0].scrollHeight + adjustingContainer[0].scrollHeight}, 500);
                    versionSelector.animate({'overflow': 'visible'}, 500);
                    $(this).find('span').text('^');

                } else {
                    versionSelector.animate({'height': '0px'}, 500);
                    adjustingContainer.animate({height: adjustingContainer[0].scrollHeight - versionSelector.children()[0].scrollHeight}, 500);
                    versionSelector.animate({'overflow': 'hidden'}, 500);
                    $(this).find('span').text('v');
                }

            });

            $('.fixVersionList').find('h2').click(function () {

                var versionSelector = $(this).parent('.version').parent('.fixVersionList');

                if (versionSelector.find('.issue').css('height') == '0px') {
                    versionSelector.find('.issue').animate({height: $(this).parent('.version')[0].lastElementChild.scrollHeight}, 500);
           ...