Auto size grid container to fit content-CodePudding

I am trying to make the grid container (services) fit its content. On the button (read more / read less) click, the list switches place with the description and vice versa. So, when there's a list visible, I want the parent to fit its content, and the same goes for the description. But, somehow, it keeps the width of the description element all the time, although it's out of the container. I have tried everything but with no success.

$('.read-more').click(function() {
  var index = $('.read-more').index(this);
  $('.services-list').eq(index).toggleClass('hide');
  $('.services-description').eq(index).toggleClass('reveal');
});

$('.read-less').click(function() {
  var index = $('.read-less').index(this);
  $('.services-list').eq(index).toggleClass('hide');
  $('.services-description').eq(index).toggleClass('reveal');
});

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

li:last-child {
  margin-top: 10px;
}

a {
  cursor: pointer
}

.services {
  width: fit-content;
  display: grid;
  grid-template-columns: fit-content(100%) fit-content(100%);
  overflow: hidden;
  background: #a3b3f6;
}

.services-list {
  max-width: max-content;
  grid-area: 1/1;
  opacity: 1;
  margin-left: 0;
  transition: all 0.4s ease-in-out;
}

.services-description {
  max-width: 370px;
  grid-area: 1/1;
  opacity: 0;
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.hide {
  opacity: 0;
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.reveal {
  opacity: 1;
  margin-left: 0;
  transition: all 0.4s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

  <div >

    <ul >
      <li>Service 1</li>
      <li>Service 2</li>
      <li>Service 3</li>
      <li><a >Read More</a></li>
    </ul>

    <ul >
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis ut ex eget tincidunt. Aliquam euismod consectetur varius. Phasellus laoreet fringilla felis, eget porta neque pretium vitae. Fusce viverra mattis sem vel mollis. Nam non
          aliquam diam, quis sagittis quam. Fusce tempor dolor libero, eget cursus mauris euismod vel.</p>
      </li>
      <li><a >Read Less</a></li>
    </ul>

  </div>

</div>

CodePudding user response：

Even with margin-left: -100%, the description is still a child of the container. You need to either set it to display: none or change its width.

$('.read-more').click(function() {
  var index = $('.read-more').index(this);
  $('.services-list').eq(index).toggleClass('hide');
  $('.services-description').eq(index).toggleClass('reveal');
});

$('.read-less').click(function() {
  var index = $('.read-less').index(this);
  $('.services-list').eq(index).toggleClass('hide');
  $('.services-description').eq(index).toggleClass('reveal');
});

* {
  padding: 0;
  margin: 0;
}

li {
  list-style: none;
}

li:last-child {
  margin-top: 10px;
}

a {
  cursor: pointer
}

.services {
  width: fit-content;
  display: grid;
  grid-template-columns: fit-content(100%) fit-content(100%);
  overflow: hidden;
  background: #a3b3f6;
}

.services-list {
  max-width: max-content;
  grid-area: 1/1;
  opacity: 1;
  margin-left: 0;
  transition: all 0.4s ease-in-out;
}

.services-description {
  max-width: 370px;
  grid-area: 1/1;
  opacity: 0;
  width: 0;
  height: 0;
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.hide {
  opacity: 0;
  width: 0;
  margin-left: -100%;
  transition: all 0.4s ease-in-out;
}

.reveal {
  opacity: 1;
  margin-left: 0;
  width: unset;
  height: unset;
  transition: all 0.4s ease-in-out;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >

  <div >

    <ul >
      <li>Service 1</li>
      <li>Service 2</li>
      <li>Service 3</li>
      <li><a >Read More</a></li>
    </ul>

    <ul >
      <li>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sagittis ut ex eget tincidunt. Aliquam euismod consectetur varius. Phasellus laoreet fringilla felis, eget porta neque pretium vitae. Fusce viverra mattis sem vel mollis. Nam non
          aliquam diam, quis sagittis quam. Fusce tempor dolor libero, eget cursus mauris euismod vel.</p>
      </li>
      <li><a >Read Less</a></li>
    </ul>

  </div>

</div>