How To Slide Section On Click

In this topic,

We are going to see how to slide the section on click using jQuery.

Step-1: include the jQuery link in the <head>..</head>tag on index.html file.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Step-2: Create Html Code in the index.html file.

<body>
  <div class="container">
    <div class="section">
      <div class="first-sections test">
        <div class="summer-club-section">
          <div class="summer-club">
            <h2>SUMMER CLUB</h2>
            <p>Meet the newest member of our product family and<br> let us know your thoughts</p>
          </div>
          <div class="first-section-buttons">
            <div class="lets-go-first">
              <button type="button" class="go-button">OK, let's go</button>
            </div>
          </div>
        </div>
      </div>
      <div class="sec-sections test">
        <div class="second-section">
          <div class="second-section-content">
            <h2>"Thanks for taking time out to tell us more about you and your<br>beachwear preferences</h2>
          </div>
          <div class="second-section-buttons">
            <div class="lets-go-first">
              <button type="button" class="go-button">Sure thing</button>
            </div>
          </div>
        </div>
      </div>
      <div class="third-sections test">
        <div class="first-slide">
          <div class="first-slide-content">
            <h2>1 :- Let's start by finding out how beachwear aware you are...</h2>
          </div>
          <div class="first-slide-buttons">
            <div class="lets-go-first">
              <button type="button" class="go-button">Let's do it</button>
            </div>
          </div>
        </div>
      </div>

      <div class="four-sections test">
        <div class="first-slide-a">
          <div class="first-slide-a-content">
            <h2>a. How often do you use beachwear products? *</h2>
          </div>
          <div class="boxes">
            <div class="box">1</div>
            <div class="box">2</div>
            <div class="box">3</div>
            <div class="box">4</div>
            <div class="box">5</div>
            <div class="box">6</div>
            <div class="box">7</div>
            <div class="box">8</div>
            <div class="box">9</div>
            <div class="box">10</div>
          </div>
          <div class="slide-a-content">
            <div class="first-span">
              <span>Not at all often</span>
            </div>
            <div class="last-span">
              <span>Extremely often</span>
            </div>
          </div>
          <div class="first-slide-a-buttons">
            <div class="lets-go-first">
              <button type="button" class="go-button">OK!</button>
            </div>
          </div>
        </div>
      </div>
      <div class="five-sections test">
        <div class="first-slide-b">
          <div class="first-slide-b-content">
            <h2>b. What beachwear brands, if any, can you think of?*</h2>
            <p><span>List as many as you can, separated by commas</span></p>
          </div>
          <div class="input-quetions">
            <input type="text" classs="first-slide-b-input" placeholder="Type your answer here...">
          </div>
          <div class="first-slide-buttons">
            <div class="lets-go-first">
              <button type="button" class="go-button">Let's do it</button>
            </div>
          </div>
        </div>
      </div>
      <div class="six-sections test">
        <div class="first-slide-c">
          <div class="first-slide-c-content">
            <h2>c. When did you last buy a beachwear product?</h2>
          </div>
          <div class="option-boxes">
            <div class="option-box"><span>A</span>Less than 1 month ago</div>
            <div class="option-box"><span>B</span>Between 1 and 6 months ago</div>
            <div class="option-box"><span>C</span>Between 6 months and 1 year ago</div>
            <div class="option-box"><span>D</span>More than 1 year ago</div>
            <div class="option-box"><span>E</span>I don't remember</div>
          </div>
          <div class="first-slide-a-buttons">
            <div class="lets-go-first">
              <button type="button" class="go-button">OK!</button>
            </div>
          </div>
        </div>
      </div>
      <div class="seven-sections test">
        <div class="second-slide">
          <div class="second-slide-content">
            <h2>2 :- Great. So, let's hear your thoughts about Origama®</h2>
          </div>
          <div class="second-slide-buttons">
            <div class="lets-go-first">
              <button type="button" class="go-button">OK</button>
            </div>
          </div>
        </div>
      </div>
      <div class="nav-button">
        <nav class="navigation-section">
          <button type="button" class="up-arrow">
            <img src="how-to-slide-section-on-click-01.png" alt="up-arrow" width="15" height="15">
          </button>
          <button type="button" class="down-arrow">
            <img src="how-to-slide-section-on-click-02.png" alt="down-arrow" width="15" height="15"></button>
          </nav>
        </div>
      </div>
    </div>
  </body>

Step-3: Add CSS in<style>….</style> tag on index.html file.

body{
    margin: 0;
  }
  .container {
    max-width: 1200px;
    margin: 0 auto;
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    position: relative;
  }
  .background-image {
    position: fixed;
    left: 0;
    right: 0;
    z-index: -1;
    opacity: 0.7;
    background-size: cover;
  }
  .background-image img{
    width: 100%;
  }
  .first-section {
    height: 100vh;
    width: 100%;
    transform: translate(0%,40%);
  }
  button.go-button {
    background: #000;
    color: #ddd;
    border: none;
    padding: 12px 20px;
    font-size: 24px;
    border-radius: 4px;
    cursor: pointer;
  }
  button.go-button:hover{
    background-color: rgb(47, 47, 47);
  }
  .first-section-buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
  }
  button.first-press {
    background: none;
    border: none;
  }
  .summer-club h2 {
    font-size: 62px;
    font-weight: 900;
    text-align: center;
    margin: 0;
  }
  .summer-club p {
    font-size: 20px;
    margin: 0;
    text-align: center;
  }
  .summer-club {
    padding-bottom: 100px;
  }
  .second-section-buttons, .first-slide-buttons{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
  }
  .second-section-content h2, 
  .first-slide-content h2, 
  .first-slide-a-content h2, 
  .first-slide-b-content h2, 
  .first-slide-c-content h2,
  .second-slide-content h2{
    font-weight: unset;
    font-size: 24px;
    line-height: 32px;
  }
  .first-sections, 
  .sec-sections, 
  .third-sections, 
  .four-sections, 
  .five-sections, 
  .six-sections,
  .seven-sections{
    height: 100vh;
    width: 100%;
    position: relative;
  }
  .summer-club-section{
    position: absolute;
    left: 30%;
    top: 35%;
  }
  .second-section, .first-slide, .first-slide-a, .first-slide-b, .first-slide-c, .second-slide{
    position: absolute;
    top: 35%;
    left: 0;
    width: 100%;
  }
  .first-slide-c{
    top: 30%;
  }
  .boxes{
    display: flex;
  }
  .box {
    border-radius: 4px;
    background-color: rgba(10, 10, 10, 0.1);
    box-shadow: rgb(10 10 10 / 60%) 0px 0px 0px 1px;
    transition: all 0.1s ease-out 0s;
    margin-right: 10px;
    height: 60px;
    font-size: 20px;
    line-height: 28px;
    width: 60px;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    cursor: pointer;
  }
  .box:hover, 
  .option-box:hover{
    background-color: rgba(10, 10, 10, 0.3);
  }
  .slide-a-content {
    display: flex;
    flex-wrap: wrap;
    padding:  15px 0px;
  }
  .last-span {
    margin-left: 40%;
  }
  .first-span span, .last-span span{
    font-size: 18px;
  }
  input[type="text"] {
    background: transparent;
    border-bottom: 2px solid #afafaf;
    border-top: none;
    border-right: none;
    border-left: none;
    height: 50px;
    width: 50%;
    font-size: 26px;
    outline: none;
  }
  ::placeholder {
    font-size: 26px;
  }
  .input-quetions {
    padding: 15px 0px;
  }
  .first-press b {
    padding-left: 10px;
  }
  .option-box {
    border-radius: 4px;
    background-color: rgba(10, 10, 10, 0.1);
    box-shadow: rgb(10 10 10 / 60%) 0px 0px 0px 1px;
    transition: all 0.1s ease-out 0s;
    margin-bottom: 10px;
    height: 50px;
    width: 40%;
    font-size: 20px;
    line-height: 28px;
    align-items: center;
    display: flex;
    cursor: pointer;
  }
  .option-box span{
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    background-color: #eee;
    margin: 10px;
  }
  .shift-text {
    padding-bottom: 15px;
  }
  .first-slide-a-buttons{
    margin-top: 15px;
  }
  .navigation-section button{
    background-color: #000;
  }
  .nav-button {
    position: fixed;
    bottom: 5%;
    right: 10%;
  }
  .navigation-section button {
    background-color: #000;
    font-size: 18px;
    border: none;
  }

Step-4: Add jQuery code in <script>…</script> tag on index.html.

I have added an active class in the section on click.

The first section removed the active class and the second section add the active class on button click.

$(".down-arrow").click(function(event) {
   var $target = $('.test.active').next('.test');
   if ($target.length == 0)
   $target = $('.test:first');

   $('html, body').animate({
   scrollTop: $target.offset().top
   }, 'slow');

   $('.active').removeClass('active');
   $target.addClass('active');

});
$(".up-arrow").click(function(event) { var $target = $('.test.active').prev('.test'); if ($target.length == 0) $target = $('.test:first'); $('html, body').animate({ scrollTop: $target.offset().top }, 'slow'); $('.active').removeClass('active'); $target.addClass('active'); });

Review the below video.

Submit a Comment

Your email address will not be published.

Subscribe

Select Categories