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.
