0

I have div, once it clicked on the text changes from Category to list that I have under display: none, the click triggers it to display: block.

I got that part working, but I have no idea how to make the transition so the width will stretch smooth and not all at once.

  $(document).ready(function(){
    $( '#cat' ).click(function() {
      if($('#cat').hasClass('open')){
          $('#cat').removeClass('open');
      }
      else{
          $('#cat').addClass('open');
      }
    });
  });
.categories #cat{
    z-index: 10;
    border: 1px solid black;
    padding: 10px 70px;
    background-color: black;
    color: white;
    cursor: pointer;
    outline: none;
    display: inline-block;
    transition: all 300ms linear;
}
.list{
  display: none;
  list-style: none;
  padding: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.list li{
  display: inline-block;
  margin: 0 5px;
}
.open .list{
  display: block;
}
.open span{
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories">
      <br/>
      <h1>New Collection</h1>
      <br/>
        <div id="cat">
          <span>Categories</span>
          <ul class="list">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
        </div>
    </div>

I have tried adding transition: all 300ms ease-in-out and/or linear, none worked. Tried also using animate() in jquery, and css().

How can I display element width change smoothly?

Yotam
  • 57
  • 9

1 Answers1

0

AFAIK you need to set width for the div while he with class open and without class like:

.categories #cat {
    // all your setup
    width: 20vw;
}
.categories #cat.open {
   width: 50vw;
   white-space: nowrap;
 }

and your transition should work fine after it the white-space is important here because as you remove it the ul will print and you will see weird behvior

UPDATE 

  $(document).ready(function(){
    $( '#cat' ).click(function() {
      if($('#cat').hasClass('open')){
          $('#cat').removeClass('open');
      }
      else{
          $('#cat').addClass('open');
      }
    });
  });
.categories #cat{
    z-index: 10;
    border: 1px solid black;
    padding: 10px 70px;
    background-color: black;
    color: white;
    cursor: pointer;
    outline: none;
    width:20vw;
    display: inline-block;
    transition: all 300ms linear;
}
.categories #cat.open {
 width: 50vw;
 white-space: nowrap;
}
.list{
  display: none;
  list-style: none;
  padding: 0;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}
.list li{
  display: inline-block;
  margin: 0 5px;
}
.open .list{
  display: block;
}
.open span{
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="categories">
      <br/>
      <h1>New Collection</h1>
      <br/>
        <div id="cat">
          <span>Categories</span>
          <ul class="list">
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
            <li>test</li>
          </ul>
        </div>
    </div>
TalOrlanczyk
  • 1,205
  • 7
  • 21