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');
}); In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular
In this article, we have to show Create and Used PIPE in angular