滑动面板打开点击

.destination {
    width: 100%;
    height: 130vh;
    background-color: #f8f8f8;
    margin: 0 auto;
}

.destination-inner {
    margin: 0 auto;
    padding: 100px 0px 0 0;
}

.destination-inner h1 {
    font-family: 'Inter', sans-serif;
    font-weight: 300;
    font-size: 29px;
    color: #555555;
    text-transform: uppercase;
    text-align: center;
}

.destination-inner h1 span {
    font-weight: 600;
}

.destination-inner h2 {
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    font-size: 16px;
    color: #555555;
    text-transform: uppercase;
    text-align: center;
    padding-bottom: 25px;
}

.destination-inner h3 {
    list-style: none;
    color: #fff;
    font-family: 'Roboto', sans-serif;
    vertical-align: middle;
    font-size: 28px;
    font-weight: 300;
    text-transform: uppercase;
    line-height: 1.4;
    padding-top: 80px;
}

.destination-inner p {
    font-size: 16px;
    font-family: 'Roboto', sans-serif;
    font-weight: 300;
    line-height: 1.7;
    color: #555555;
    text-align: center;
    margin-bottom: 50px;
}

.destination-inner hr {
    width: 14%;
    color: #fe0103;
    margin-top: 50px;
    margin-bottom: 50px;
}

.destination-inner ul {
    max-width:90%;  
    padding: 0px 30px; 
    margin: 0 auto;
    text-align: center;
    padding:10px 25px;
    cursor: pointer;
    list-style: none;
}

.destination-inner li {
    background-color: #32374a;
    display: inline-block;
    width: 250px;
    height: 320px;
    cursor: pointer;
    transition: all 0.3s ease 0s;
    padding: 70px 40px;
    margin-right: 15px;
    list-style: none;
}

.destination-inner li a {
    text-decoration: none;
}

.destination-inner li:hover {
    background-color: #393F55;
    transition: all 0.3s ease 0s;
}

<section class="destination" id="travels">
         <div class="destination-inner">
              <h2>STEP 01</h2>
              
              <h1>Choose your <span>Destination</span></h1>
              <hr>
             <p>They are innovative and carefully researched and curated.<br> They guides are also hand picked, and are highly experienced, very often with a special expertise.<br> The vehicles are able to be adapted to more active days of touring.</p>
              <ul data-grid="Grid 3">
                  <li>
                      <a href="#">    
                      <h3>City & <br>Table Mountain</h3>
                      </a>
                  </li>
                  <li>
                      <a href="#">    
                      <h3>The Cape <br>Peninsula</h3>
                      </a>
                  </li>
                  <li>
                      <a href="#">    
                      <h3>The <br>Winelands</h3>
                      </a>
                  </li>
                  <li>
                      <a href="#">    
                      <h3>The <br>Overberg</h3>
                      </a>
                  </li>
              </ul>
          </div>
    </section>