My toggle for my button text wont work.. jQuery [closed] - javascript

Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 5 days ago.
Improve this question
HTML
<span
id="hs_cos_wrapper_petition-area-module-2_"
class="hs_cos_wrapper hs_cos_wrapper_widget hs_cos_wrapper_type_rich_text"
style=""
data-hs-cos-general-type="widget"
data-hs-cos-type="rich_text"
><h1 style="font-size: 42px">
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitae</span
>
</h1>
<h1 style="font-size: 30px">
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit.</span
>
</h1>
<p style="font-weight: normal">
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitae</span
>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
<p>
<span style="color: #ffffff"
>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quidem, iusto,
voluptatibus blanditiis totam eligendi vitaeLorem ipsum dolor sit amet
consectetur adipisicing elit. Quidem, iusto, voluptatibus blanditiis totam
eligendi vitaeLorem ipsum dolor sit amet consectetur adipisicing elit.
Quidem, iusto, voluptatibus blanditiis totam eligendi vitaex
</span>
</p>
</span>
jQuery
<script>
//Read more button
var parsToHide = 3;
var initReadMore = function() {
$('#hs_cos_wrapper_petition-area-module-2_').children().each(function( index, element ) {
if ( index == parsToHide + 5) {
console.log("Logging from read more function");
$( '<button id="read-more-button" class="read-more-btn" onclick="readMore()">READ MORE </button>' ).insertAfter( $( element ) );
}
if (index > parsToHide + 1) {
$(element).hide();
$(element).addClass('read-more-hidden');
}
});
}
var readMore = function(){
$('#hs_cos_wrapper_petition-area-module-2_ .read-more-hidden').toggle();
console.log($('.read-more-btn').text() == 'READ MORE' ? 'READ LESS' : 'READ MORE');
}
document.addEventListener("DOMContentLoaded", () => {
initReadMore();
});
Above is my script. I am essentially trying to get my button to show Read Less once clicked and then show Read more when clicked again. Essentially toggling the text. I've done a ternary check in my readMore function but in the log, it shows "READ MORE" every time it's clicked. It doesn't toggle between "READ LESS" and "READ MORE".
Any idea why?
I am trying to toggle the text for my button. It seems correct but the toggle wont occur.

Related

Tabs and tab content not displaying content on click

I've created some clickable tabs but for some reason the tab content does not display on click. I can't see anything out of place with my code. Any ideas would be greatly appreciated. Thanks.
<div className="container-tabs">
<ul className="tablist">
<li data-tab-target="engage" className="active-tab tab">01</li>
<li data-tab-target="scope" className="tab">02</li>
<li data-tab-target="build" className="tab">03</li>
</ul>
<div className="tab-content py">
<div id="engage" data-tab-content className="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum
quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus
voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum
in numquam omnis tempora illo consequuntur.
</p>
</div>
</div>
</div>
const tabs = document.querySelectorAll('[data-tab-target]');
const tabContents = document.querySelectorAll('[data-tab-content]');
tabs.forEach(tab => {
tab.addEventListener('click', () => {
const target = document.querySelector(tab.dataset.tabTarget)
tabContents.forEach(tabContents => {
tabContents.classList.remove('active-tab')
})
tabs.forEach(tab => {
tab.classList.remove('active-tab')
})
tab.classList.add('active-tab')
target.classList.add('active-tab')
})
});

you can keep a variable with the selected tab, and go from there, also it's better to have only one listener on your tablist, i would set an id to <ul class="tablist"> for faster select.. something like this:
const tabs = document.getElementById("tablist");
let selected = document.querySelectorAll("[data-tab-target]")[0];
const tabContents = document.querySelectorAll("[data-tab-content]");
let selectedContent = tabContents[0];
tabs.addEventListener("click", (e) => {
selected.classList.remove("active-tab");
selected = e.target;
selected.classList.toggle("active-tab");
const index = [...selected.parentNode.children].indexOf(selected);
selectedContent.classList.remove("active-tab");
selectedContent = tabContents[index];
selectedContent.classList.toggle("active-tab");
});
.active-tab {
color: red;
}
<div class="container-tabs">
<ul class="tablist" id="tablist">
<li data-tab-target="engage" class="active-tab tab">01</li>
<li data-tab-target="scope" class="tab">02</li>
<li data-tab-target="build" class="tab">03</li>
</ul>
<div class="tab-content py">
<div id="engage" data-tab-content class="active-tab">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptatibus aperiam repudiandae animi rerum quae porro molestias placeat iure nostrum doloribus.
</p>
</div>
<div id="scope" data-tab-content>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Nam sit iste, veritatis iusto nulla delectus voluptatibus neque. Tenetur, aperiam itaque.
</p>
</div>
<div id="build" data-tab-content>
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ut quas nulla, necessitatibus expedita illum in numquam omnis tempora illo consequuntur.
</p>
</div>
</div>

How to change the menu style when detecting scrolling scroll through jquery

I have a question and don't know what to do to achieve it!
This is the case. I hope that when scrolling the article, for example, when scrolling to the service section of the article, the service of the header can add the yellow CSS style at this time, but I will only increase the style when I click, and how to scroll. Don’t you know if you change the style of the header?
The attached picture is the effect I hope to achieve.
Thank you all for your help.
$(document).ready(function(){
$('.item').click(function(e){
e.preventDefault();
let target = $(this).attr('href');
// console.log(target);
let position = $(target ).offset().top - 20;
// console.log(target,position)
$('.content').animate({scrollTop: position}, 1000);
})
$(window).scroll(function(){
console.log('scroll');
});
})
//add active CSS
$('.js-about').on('click',function(){
$('.js-about').addClass('active');
$('.js-service').removeClass('active');
})
$('.js-service').on('click',function(){
$('.js-service').addClass('active');
$('.js-about').removeClass('active');
})
.wrap {
width: 500px;
background-color: #c7e1fc;
border-radius: 20px;
padding: 20px;
margin: 60px auto;
}
.wrap .header {
display: flex;
border-bottom: 2px solid #222;
padding: 10px;
}
.wrap .header .item {
margin-right: 60px;
text-decoration: none;
font-weight: 600;
color:#222;
}
.wrap .content {
height: 500px;
overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
margin: 30px;
}
.wrap .content h2 {
display: inline-block;
font-weight: 900;
font-size: 36px;
background-color: #222;
color: #fff;
padding: 10px;
}
.wrap .content p {
font-size: 16px;
line-height: 1.5;
}
.wrap .box2 {
height: 490px;
}
.active {
font-weight: 500;
color: #000;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<ul class="header">
<li>ABOUT</li>
<li>SERVICE</li>
</ul>
<div class="content">
<section class="box1" id="js-box1">
<h2 class="about">about</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,</p>
</section>
<section class="box2" id="js-box2">
<h2 class="service">service</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .
uptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla .</p>
</section>
</div>
</div>

You can check the offset().top of the second section. Like this:
$(document).ready(function(){
$('.item').click(function(e){
e.preventDefault();
let target = $(this).attr('href');
// console.log(target);
let position = $(target ).offset().top + $('.content').scrollTop() - 20;
// console.log(target,position)
$('.content').animate({scrollTop: position}, 1000);
})
$('*').scroll(function(){
if($('#js-box2').offset().top - $('.wrap').offset().top < $('.header').height() + 50) {
$('.js-about').removeClass('active');
$('.js-service').addClass('active');
}
else {
$('.js-about').addClass('active');
$('.js-service').removeClass('active');
};
});
})
.wrap {
width: 500px;
background-color: #c7e1fc;
border-radius: 20px;
padding: 20px;
margin: 60px auto;
}
.wrap .header {
display: flex;
border-bottom: 2px solid #222;
padding: 10px;
}
.wrap .header .item {
margin-right: 60px;
text-decoration: none;
font-weight: 600;
color:#222;
}
.wrap .content {
height: 500px;
overflow-y: scroll;
}
.wrap .content .box1, .wrap .content .box2 {
margin: 30px;
}
.wrap .content h2 {
display: inline-block;
font-weight: 900;
font-size: 36px;
background-color: #222;
color: #fff;
padding: 10px;
}
.wrap .content p {
font-size: 16px;
line-height: 1.5;
}
.wrap .box2 {
height: 490px;
}
.active {
font-weight: 500;
color: #000;
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wrap">
<ul class="header">
<li>ABOUT</li>
<li>SERVICE</li>
</ul>
<div class="content">
<section class="box1" id="js-box1">
<h2 class="about">about</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat.</p>
</section>
<section class="box2" id="js-box2">
<h2 class="service">service</h2>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat.</p>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias,
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat. Alias, voluptatem? Veritatis dolores suscipit aut dicta nulla aliquid.Lorem ipsum, dolor sit amet consectetur adipisicing elit. Corporis, dolores repellat.</p>
</section>
</div>
</div>
You can do this for following sections as well using else if starting with the last one.

Animate scrolling to top of element within an overflow div

I am struggling to figure this out. I have a div that is set to overflow: scroll;. I want to be able to click a link and have the content in that div scroll to the top of the linked element. For some reason it always seems like it scrolls until the top of the element hits the top of the body. I need it to stop when it hits the top of the overflow div. In the example I have below when you click "link to paragraph 3" I need it to put paragraph 3 at the top of the scrollable div.
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var anchor = $(this).attr("href");
console.log(anchor);
$(".parent").animate({
scrollTop: $(anchor).offset().top - $(".parent").offset().top
}, 2000);
});
});
body {background-color:tan;}
.parent {height:100px; overflow-y:scroll; background-color:#ffff; margin-top:100px;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Link to paragraph 3
Link to paragraph 4
<div class="parent">
<div id="child1">
<p><strong>paragraph 1</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child2">
<p><strong>paragraph 2</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child3">
<p><strong>paragraph 3</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child4">
<p><strong>paragraph 4</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child5">
<p><strong>paragraph 5</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
</div>

jQuery's .offset() method returns the offset of the element relative to the document. To counteract this, you need to substract the offset of the container. Below I have modified the 4th line of javascript only.
$(document).ready(function(){
$("a").click(function(e){
e.preventDefault();
var anchor = $(this).attr("href");
console.log(anchor);
$(".parent").animate({
scrollTop: $(".parent").scrollTop() + $(anchor).offset().top - $(".parent").offset().top
}, 2000);
});
});
body {
background-color:tan;
}
.parent {
height:100px;
overflow-y:scroll;
background-color:#ffff;
margin-top:100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Link to paragraph 3
Link to paragraph 4
<div class="parent">
<div id="child1">
<p><strong>paragraph 1</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child2">
<p><strong>paragraph 2</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child3">
<p><strong>paragraph 3</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child4">
<p><strong>paragraph 4</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
<div id="child5">
<p><strong>paragraph 5</strong>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eaque consectetur repellendus laboriosam ad magnam fugiat cum, in nam, facilis enim perferendis? Deleniti laudantium praesentium est culpa, similique ut error iure.
</p>
</div>
</div>

how to divide a long paragraph from API into 3 section using CSS or Javascript

currently, I am trying to get a long paragraph or news into 3 sections from API so it can take a layout like in example picture. but the problem I can't divide the paragraph to make it like a layout unless I got 3 attributes for every section and just read it in angular.
I already read this Divide HTML into pages, split long paragraphs
but it still not solve my problem, can someone help me to solve this problem only using 1 attribute?
this is my example data for news:
Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.Lorem ipsum dolor sit amet consectetur adipisicing elit. Laborum natus aspernatur nihil doloribus excepturi vel sed dolores dolorum! Facere harum quia voluptates impedit praesentium. Sapiente alias consequatur sit beatae voluptatibus.
this is my html code :
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-4 pl-0 text-center text-large md-no-padding-lr md-margin-30px-bottom">
<!-- start blockquote -->
<p class="text-extra-dark-gray margin-50px-bottom md-margin-20px-bottom alt-font">
<i class="fas fa-quote-left text-light-gray icon-medium margin-15px-bottom"></i>
Apa yang mendefinisikan siapa kita, tidak ada artinya dibandingkan apa yang menyatukan kita.
<i class="fas fa-quote-right text-right text-light-gray icon-medium margin-15px-bottom"></i>
</p>
<!-- end blockquote -->
</div>
<div class="col-12 col-lg-8 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Fuga autem eius, hic tempore neque vel beatae facilis quaerat excepturi, minima odio dolore! Atque non quo illo, odio est vel consequuntur! Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptatem quis ex aspernatur ab sunt repellat in ratione. Suscipit fugiat, sed laborum debitis, soluta dolores ipsum hic quae, corporis dignissimos unde! Lorem ipsum dolor sit amet consectetur adipisicing elit. Delectus impedit repudiandae illum, incidunt tenetur sapiente ad itaque odio, ipsa cupiditate saepe omnis voluptatibus! Ipsum beatae, nihil voluptatem earum illum non. Lorem, ipsum dolor sit amet consectetur adipisicing elit. Laudantium sunt aliquam corrupti sed voluptates, suscipit quibusdam rerum inventore molestiae, ullam fugiat ducimus, debitis mollitia consequatur. Maiores, cupiditate! Nesciunt, odio modi.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
<!-- start parallax section -->
<section class="wow fadeIn parallax p-0 height-400px md-height-200px sm-height-100px background-position-x-50 cover-background" data-stellar-background-ratio="0.5" style="background-image: url('../../../assets/img/galeri/mpkmb-6.webp');">
<div class="container">
<div class="row">
<div class="col-12"></div>
</div>
</div>
</section>
<!-- end parallax section -->
<!-- start section -->
<section class="wow fadeIn">
<div class="container">
<div class="row">
<div class="col-12 col-lg-10 d-flex flex-wrap mx-auto last-paragraph-no-margin text-center text-md-left">
<div class="col-12 col-lg-5 pl-0 text-large md-no-padding-lr md-margin-30px-bottom">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum, dolor sit amet consectetur adipisicing elit. Consequatur, ab minima! Aliquid unde architecto, omnis, quisquam, rem exercitationem fuga reiciendis quam voluptatibus aliquam minima aperiam dolore voluptatem sunt alias quis.</p>
</div>
<div class="col-12 col-lg-7 pr-0 text-large md-no-padding-lr text-center text-md-left">
<p class="text-large line-height-30 text-medium-gray text-center text-md-justify sm-line-height-26">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled. Lorem ipsum dolor sit amet consectetur, adipisicing elit. Harum placeat officiis laborum. Amet harum placeat, eos, mollitia laudantium odio, quam rerum ut esse provident explicabo asperiores in possimus molestiae officia.</p>
</div>
</div>
</div>
</div>
</section>
<!-- end section -->
so to sum it:
how can I make a sentence which can continue to the next section like the layout or example image do?
As for my code, it already done slicing the layout image but still not divide or make the news continue to the next section since in my code I divide it into 3 section

Move class/style based on input range value

I wonder how I can highlight only the paragraph that at any moment correspondes to value retrieved from the input with a type of range.
When I move the slider I want to add a class to the paragraph which correspondes to the input value at that given time. I have achieved setting the class (I just used inline styling to test with), but how can I also at the same time remove the class from all the other paragraphs which don't correspond to the value?
This is what I got now:
<input id="part" type="range" min="1" max="6" value="6" step="1">
<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>
JS / jQuery:
var p = document.getElementById('part');
p.addEventListener('input', function () {
$('p.update-' + p.value).css('color', 'red');
}, false )

On the following example, when the range input moves, all <p> elements are changed to the .transparent class, then the selected one receives the new .selected class.
function highlight(){
var x = document.getElementsByTagName("p");
var i;
for (i = 0; i < x.length; i++) {
x[i].className = "transparent";
}
var sell = document.getElementById("parag").value;
document.getElementById("a" + sell).className = "selected";
}
body {
background: #f7f7f7;
}
.selected {
color: #000000;
background: rgba(215, 255, 0, 0.8);
}
.transparent {
color: #666666;
background: transparent;
}
<input id=parag type="range" name="range" min="1" max="6" step="1" oninput="highlight()">
<p id=a1 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p id=a2 class="transparent">Lorem ipsum dolor sit amet.</p>
<p id=a3 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p id=a4 class="transparent">Lorem ipsum dolor.</p>
<p id=a5 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p id=a6 class="transparent">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, impedit fugiat officia itaque dolores. Laudantium.</p>

An alternative solution only using javascript and reducing the number of operations is:
// save the previous selected paragraph
var oldSelectedParagraph = null;
window.onload= function(e) {
document.getElementById('part').addEventListener('change', function () {
// if the previous selected paragraph exists remove the attribute
if (oldSelectedParagraph != null) {
oldSelectedParagraph[0].style.color = '';
}
//save current selected paragraph if valid and set the attribute
oldSelectedParagraph = document.querySelectorAll('p.update-' + this.value);
if (oldSelectedParagraph.length == 1) {
oldSelectedParagraph[0].style.color = 'red';
} else {
oldSelectedParagraph = null;
}
}, false )
}
<input id="part" type="range" min="1" max="6" value="6" step="1">
<p class="update-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. In nobis nemo porro saepe facere minus!</p>
<p class="update-2">Lorem ipsum dolor sit amet.</p>
<p class="update-3">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Rem impedit neque odio, aut. Quos sapiente quisquam molestias, fugit iste aliquid, aperiam porro cumque quaerat pariatur obcaecati.</p>
<p class="update-4">Lorem ipsum dolor.</p>
<p class="update-5">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Placeat, eius dolorum consectetur.</p>
<p class="update-6">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, dolore nesciunt nisi porro odit explicabo debitis? Iure qui, imped</p>

Categories