<div class="box">
  <label>

    <div class="boxInside jq-move">
      <button>
        <i class="fas fa-sort-up fa-lg jq-rotate"></i>
      </button>
      <p>
        帝國商務到我服裝有所多次日韓愛情打擊，責任編輯變化自行音樂不喜歡有一定得知你知道不停，好處網上請大家上傳寫出來風情回覆最近內地手機住房限制功夫供應商，如果主管收入臉上能夠技術運行平台，採購品質爭取父母適用於一種操作系統寶貝滑鼠戰略先後十大終於，羅東網域名稱民眾基本裝修，減少長大也能女孩子，市場價一顆寫出來正是親愛的民間含有舉辦生意航空照顧神秘，在我套件對了在此回到不停下來保險指導曾經，反饋區域經營許可證，是的新竹能量執行時間口氣同樣研發見到，成長少女還沒有，一股詢問市委維修他在倒是他人聰明徹底作為不如北方，資料就能右鍵，交換各項說了資料庫保險目前策略，模式謝謝貿易只不過一條女子不多作業反饋在我頭髮中有，地圖貼圖情緒默認休閒總數多媒體道德同一特徵忍不住，供求個人作為本網功能挑戰費用汽車女孩子，我家請大家政治傳說一個他們的他們的你有。
      </p>
      <p>
        Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dignissimos nisi architecto ab ipsum, perferendis ratione pariatur ut laborum, obcaecati voluptate est eius aliquam magni possimus impedit eveniet eligendi hic, numquam optio. Magni, quibusdam omnis provident at similique eum, dicta numquam non enim a saepe? Blanditiis labore aspernatur architecto impedit laborum at hic tenetur, et sequi. Dolorum blanditiis sequi consequatur omnis magnam optio eveniet molestias, quas officiis perspiciatis harum voluptates voluptate, repellendus impedit hic accusantium et ipsam laboriosam at commodi doloribus error sunt iure. Blanditiis, consequuntur. Minima minus, omnis neque quae ipsa iusto pariatur vero vitae rerum natus. Saepe doloribus corrupti rem eum, dignissimos veniam pariatur impedit commodi aperiam omnis maiores delectus blanditiis, reiciendis exercitationem ullam vitae perspiciatis porro facere itaque? Suscipit, officia accusantium. Laudantium magnam neque, placeat magni eveniet eos sequi autem. Illo cupiditate unde quia quis autem atque doloribus quibusdam earum mollitia aspernatur, cum facere inventore tempore deserunt quos voluptate vitae quas quae ipsa beatae accusantium! Delectus obcaecati quisquam ut aut, a ipsam eligendi inventore suscipit non velit minus dicta ad consectetur alias nostrum, rem sit saepe corporis iste recusandae. Alias voluptate hic at possimus reprehenderit numquam rem esse explicabo, ad quas accusamus, iure quasi corrupti, culpa mollitia dolore expedita voluptates voluptatem qui quo accusantium dolor! Sint, repellat ullam voluptates maxime est cupiditate perspiciatis tempora iusto consequuntur suscipit impedit nam autem mollitia doloremque exercitationem tempore repellendus, eos cumque similique quod excepturi. Reiciendis cupiditate non est laboriosam officiis minus deleniti, nesciunt velit.
      </p>
    </div>
  </label>

 </div>

button {
  background-color: transparent;
  outline: none;
  border: none;
  cursor: pointer;
  margin-bottom: 20px;
}

.box {
  width: 1000px;
  height: 600px;
  background-color: #ccc;
  position: relative;
  overflow: hidden;
  label {
    position: absolute;
    .boxInside {
      width: 100%;
      height: 600px;
      background-color: #333333;
      position: absolute;
      bottom: -300px;
      position: relative;
      transition: all 0.5s;
      transform: translateY(0px);
      &.active {
        transform: translateY(-300px);
      }
      .fa-sort-up {
        padding: 10px 40px;

        color: #ffffff;
        position: absolute;
        right: 0;
        left: 0;
        transform: rotate(0);
        transition: all 0.5s;
        &.active {
          transform: rotate(180deg);
        }
      }
      p {
        padding: 10px 20px;
        color: #ffffff;
        line-height: 1.5;
      }
    }
  }
}

$(document).ready(function () {
  $("button").click(function (e) {
    e.preventDefault();
    $(".jq-move").toggleClass("active");
    $(".jq-rotate").toggleClass("active");
  });
});