We Keep Coding

How to apply fade animation or any other animation from display none to display block?

I have provided the javascript code that I have used to apply to hide and appear the read more text on clicking the button and it is working very fine but now the client wants that the text should appear and hide with any animation. I don't know what should I apply fade or slide or something else to show it to the client. I don't know how to do that.
function ReadmoreFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more-text");
var btnText = document.getElementById("readMoreBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more-text{
display: none;
transition: 2s;
}
#readMoreBtn{
background: #ff963b;
color: #fff;
border:1px solid #ff963b;
border-radius: 5px;
padding: 7px 5px;
}
<div class="category-description std">
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></h2>
<p style="text-align:=justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur sodales erat luctus blandit. Vestibulum rutrum tellus fermentum massa pharetra maximus. Morbi sit amet metus vel massa tempus iaculis. Ut sit amet ligula dolor. Nam a sem at est sagittis volutpat. Vestibulum dapibus et orci eu placerat. Suspendisse placerat quis elit sed fringilla. Praesent finibus vestibulum augue in auctor. Etiam interdum dolor mi, ut facilisis magna malesuada ut. Fusce sed eros nibh.</p><span id="dots"></span>
<span id="more-text">
<h2 style="text-align:=justify;"><strong>**Get best quality art and craft supplies within your budget**</strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p>
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p></span>
</div>
<center><button onclick="ReadmoreFunction()" id="readMoreBtn">Read more</button></center>

Ok here I made some changes to your code to use font-size instead of display, to apply transition effect
function ReadmoreFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more-text");
var btnText = document.getElementById("readMoreBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.fontSize = "0";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.fontSize = "initial";
}
}
#more-text{
font-size: 0;
transition: 1s font-size;
}
#readMoreBtn {
background: #ff963b;
color: #fff;
border:1px solid #ff963b;
border-radius: 5px;
padding: 7px 5px;
}
<div class="category-description std">
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</strong></h2>
<p style="text-align:=justify;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur efficitur sodales erat luctus blandit. Vestibulum rutrum tellus fermentum massa pharetra maximus. Morbi sit amet metus vel massa tempus iaculis. Ut sit amet ligula dolor. Nam a sem at est sagittis volutpat. Vestibulum dapibus et orci eu placerat. Suspendisse placerat quis elit sed fringilla. Praesent finibus vestibulum augue in auctor. Etiam interdum dolor mi, ut facilisis magna malesuada ut. Fusce sed eros nibh.</p><span id="dots"></span>
<span id="more-text">
<h2 style="text-align:=justify;"><strong>**Get best quality art and craft supplies within your budget**</strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p>
<h2 style="text-align:=justify;"><strong>Lorem ipsum dolor sit amet, consectetur adipiscing elit. </strong></h2>
<p style="text-align:=justify;">Integer hendrerit suscipit quam ultrices tristique. Integer vel tortor vel risus ultrices tempus tempor a mauris. Etiam venenatis, elit non aliquam sollicitudin, diam tellus dictum lacus, ac scelerisque metus purus nec quam. Donec elementum vitae erat sed condimentum. Aliquam at lorem mollis, porttitor dui at, finibus magna. Aliquam id efficitur lectus, eu ultricies nibh. Nam et posuere mauris, eget hendrerit nisi. Curabitur non tortor enim.</p>
</span>
<center><button onclick="ReadmoreFunction()" id="readMoreBtn">Read more</button></center>
</div>

Read More collapse script change

I want to be able to collapse each "read-more" for its own section. The code is borrowed from w3schools and trying to modify by adding a second section. But the second button expands s the first text. I understand (from reading on other sections) I will have to modify the id for elements so that each section is self-contained. What do I need to modify this behavior? This is a new area for me, be gentle ...
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#more {display: none;}
</style>
</head>
<body>
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<script>
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>

You have to change all your IDs with classes, for example, 'cause IDs must be unique in a page.
After that, a solution could be to insert the 2 texts in 2 divs, passing this element to the myFunction to select the right parent box to work on.
function myFunction(elmnt) {
var myID = elmnt.parentNode;
var dots = myID.getElementsByClassName("dots")[0];
var moreText = myID.getElementsByClassName("more")[0];
var btnText = myID.getElementsByClassName("myBtn")[0];
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
.more {display: none;}
<div>
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction(this)" class="myBtn">Read more</button>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction(this)" class="myBtn">Read more</button>
</div>
EDIT 1
You have to change all IDs 'cause they must be unique in a page. You can't use them for another textbox. So if you want to use 2,3,4... several textboxes, you have to transform all IDs in classes.
In my example, I changed a little the script to manage those classes, not IDs. Copy and paste my code in w3school snippet, click "Run" and you'll see it work. I changed the name of variable myID in parentElement so maybe it is more clear to you.
The script var dots = parentElement.getElementsByClassName("dots")[0]; means find first element that has a class named "dots" in my parentElement (i.e. the external div that I added)
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.more {display: none;}
</style>
</head>
<body>
<div>
<h2>One</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction(this)" class="myBtn">Read more</button>
</div>
<div>
<h2>Two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction(this)" class="myBtn">Read more</button>
</div>
<script>
function myFunction(elmnt) {
var parentElement = elmnt.parentNode;
var dots = parentElement.getElementsByClassName("dots")[0];
var moreText = parentElement.getElementsByClassName("more")[0];
var btnText = parentElement.getElementsByClassName("myBtn")[0];
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
</script>
</body>
</html>

change javascript html, use jquery css [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
i have a javascript worked html code. but i dont need a html, i need a jquery css
which have the same functionality.
i try to change js html by jquery css but it does not worked
js html
$('html, div:contains('+yourstring+')', document.body).each(function(){
console.log(this);
$(this).html($(this).html().replace(
new RegExp(yourstring, 'gi'), '<span class=someclass>'+yourstring+'</span>'
));
});
to css query
$('html, div:contains('+yourstring+')', document.body).each(function(){
console.log(this);
$(this).html($(this).html().replace(
new RegExp(yourstring, 'gi').css('background-color' 'blue')
));
});

In your example, this code, will not work:
$('html, div:contains('+yourstring+')', document.body).each(function(){
$(this).html($(this).html().replace(
new RegExp(yourstring, 'gi').css('background-color' 'blue')
));
});
Since a new RegExp is not a jQuery Object, you cannot call .css() up it. You must still have an HTML Element or a jQuery Object to work with.
Another thing to be aware of is that :contains() is case sensitive. So if you're testing with "test" it will not find "Test" in your <div> element. So you may have some search issues right away with this selector.
Consider this example:
$(function() {
function replacer(sObj, n) {
var c = sObj.text().trim().split(" ");
var re = new RegExp(n, "i");
var hits = [];
$.each(c, function(k, v) {
if (v.match(re) != null) {
hits.push(k);
var newObj = $("<span>", {
class: "highlight"
}).html(v);
c[k] = newObj.prop("outerHTML");
}
});
sObj.html(c.join(" "));
return hits;
}
$("div").each(function(ind, el) {
replacer($(el), "lorem");
});
});
.para {
margin: 10px;
}
.highlight {
background-color: #ccf;
padding: 0.02em;
border-radius: 3px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="para">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed vel dictum nunc, nec pellentesque elit. Integer eget tempor tellus, sit amet volutpat purus. Proin magna est, sollicitudin in suscipit quis, tincidunt at lacus. Morbi sollicitudin sit amet justo
sit amet pellentesque. Nunc placerat ligula sapien, non laoreet tellus dictum ac. Fusce est leo, bibendum ac justo sit amet, rhoncus placerat enim. Mauris sit amet lectus felis. Aenean eget feugiat leo, rhoncus hendrerit felis. Donec placerat mi quis
justo varius tempor. Nunc ultricies mi in dolor placerat, non consequat est lobortis. Quisque ac libero in sem cursus pharetra. Fusce pretium rutrum viverra.</div>
<div class="para">Nullam tincidunt ut nisl eu venenatis. Duis non finibus orci, nec imperdiet augue. Sed consectetur orci ut magna sollicitudin sagittis. In mattis tempus molestie. Suspendisse vitae hendrerit nulla. Sed scelerisque metus eros, eu molestie felis auctor
convallis. In tempor mauris non mi bibendum mollis. Nulla eu sapien non mi aliquam interdum. Donec lorem elit, tincidunt nec lorem at, finibus commodo mauris.</div>
<div class="para">Donec non lectus auctor, imperdiet ante quis, varius erat. Aenean vitae mi magna. Nunc dui tortor, dictum volutpat porta quis, hendrerit nec nunc. Morbi blandit, lectus eget ultrices vestibulum, odio arcu rutrum sem, quis placerat lectus dui sit amet
augue. Phasellus congue gravida tortor. Sed nec mauris tempus, convallis justo ac, sollicitudin mauris. Pellentesque pretium facilisis augue in dignissim. Pellentesque sollicitudin erat vitae consectetur lacinia. Nunc faucibus lobortis sem vel faucibus.
Suspendisse a ligula aliquet, tempus neque at, egestas mauris. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam eleifend felis lorem. Vivamus sollicitudin, purus nec finibus luctus, dui urna tincidunt est, posuere imperdiet erat magna
quis turpis. Donec vestibulum nisl eu porttitor laoreet.</div>
<div class="para">Duis vel nibh a libero elementum porttitor sit amet feugiat nisl. Quisque nec maximus turpis. Maecenas in libero sit amet urna consectetur posuere. Maecenas vulputate vitae eros a malesuada. Nullam malesuada nulla et varius aliquam. Nulla hendrerit mi
ac nisi scelerisque, id molestie nibh ultricies. Vivamus venenatis, diam ac vehicula gravida, magna diam consectetur nibh, ac mollis libero enim a orci. Nam tincidunt est id vulputate ullamcorper. In nec lectus blandit, ullamcorper tortor vel, ornare
neque. In accumsan tempus orci in finibus. Mauris ac fermentum dui, ac volutpat erat.</div>
<div class="para">Praesent sed purus risus. Quisque porttitor suscipit feugiat. Quisque est massa, porttitor ut feugiat vel, consectetur nec mauris. Fusce iaculis lacus vel felis rhoncus accumsan. Vestibulum interdum lacus magna, id gravida tellus sollicitudin in. Cras
mauris turpis, elementum a imperdiet ut, faucibus sit amet elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec venenatis eget libero ut aliquet. Praesent a mollis est, ut consequat arcu. Sed nec
molestie diam. Nunc vestibulum consectetur odio non accumsan. Suspendisse eget tempus lacus. Cras quis dignissim odio, eget tincidunt nulla.</div>
This might be overboard from what you want to do. It's a good way to highlight words with a loop.
Hope that helps.

Multiple Readmore Buttons are not working?

I just can't seem to figure out how to make this work. I have tried to look and try several solutions from threads of other people but they just have a totally different code. I tried changing the id's into classes and I tried adding numbers like for example "dots2" - > "dots3" but that wouldn't work either.
As you can see, all the buttons link to the first button when I press 'Read more' or 'Read less'. Only the first text opens.
I know the basics of HTML and CSS but I'm not good with JSS at all so it doesn't make sense right now. Help is very much appreciated.
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>

Following should work fine with multiple buttons.
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="buttonTxt">Read more</button>
</div>
var buttons = document.getElementsByClassName("buttonTxt");
for(var i= 0; i< buttons.length; i++) {
buttons[i].addEventListener("click", myFunction)
}
function myFunction(evt) {
var btnText = evt.target;
var dots = btnText.parentNode.getElementsByClassName("dots")[0];
var moreText = btnText.parentNode.getElementsByClassName("more")[0];
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}

The attribute id must be unique in a document, use class instead.
Please notice the changes in the function to match the right element with the index of the currently clicked button.
Try the following way:
var allButtons = document.querySelectorAll('.myBtn');
allButtons.forEach(function(btn){
btn.addEventListener('click', myFunction);
});
function myFunction() {
var allBtns = document.querySelectorAll(".myBtn");
var allDots = document.querySelectorAll(".dots");
var allMore = document.querySelectorAll(".more");
var btnText = allBtns[[...allBtns].indexOf(this)];
var dots = allDots[[...allBtns].indexOf(this)];
var moreText = allMore[[...allBtns].indexOf(this)];
if (dots.style.display === "none") {
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
.more {display: none;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span class="dots">...</span><span class="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button class="myBtn">Read more</button>

You have to use just 1 id per tag and also the #dots display like block.
So this solution works. You have to work on ids when click. Use maybe the function in script tags in your html. Or import it correctly
function myFunction() {
var dots = document.getElementById("dots");
var moreText = document.getElementById("more");
var btnText = document.getElementById("myBtn");
if (dots.style.display === "none") {
console.log('ok');
dots.style.display = "inline";
btnText.innerHTML = "Read more";
moreText.style.display = "none";
} else {
dots.style.display = "none";
btnText.innerHTML = "Read less";
moreText.style.display = "inline";
}
}
#more {display: none;}
#dots{display:block;}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn1">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn2">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn3">Read more</button>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scel<span id="dots">...</span><span id="more">erisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta.</span></p>
<button onclick="myFunction()" id="myBtn4">Read more</button>
<script>
</script>

Make a div float whenever the bottom of it goes out of view

I'm able to add and remove classes that make a div float and unfloat, but I'm restricted to having to enter a scroll amount until the classes gets added.
What I'd like to have, is for the class to be added when the bottom of the div goes out of view, or past the viewport.
Likewise, for the class to be removed when the bottom of the div (in it's original place) can be seen again - although I'm not sure about this, as the div will always be visible now.. as it's being floated.
http://jsfiddle.net/r440tggy/
var header = $("#request-consultation");
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= 750) {
header.addClass("fixed-bottom-left");
} else {
header.removeClass("fixed-bottom-left");
}
});

Getting the element position before the scroll event makes sure that rendering problems don't happen.
You just need to get the elements position from the top, add the height and do a check against that.
var header = $("#request-consultation");
var element = header.offset().top + header.outerHeight();
$(window).scroll(function() {
var scroll = $(window).scrollTop();
if (scroll >= element) {
header.addClass("fixed-bottom-left");
} else {
header.removeClass("fixed-bottom-left");
}
});
#request-consultation {
float: right;
width: 250px;
border: 2px solid;
padding: 10px;
margin: 10px;
}
.fixed-bottom-left {
float: none;
position: fixed;
bottom: 0;
left: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="request-consultation">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit.</p>
</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae dolor ligula. Cras at purus eget ante gravida rhoncus. Aliquam dictum, odio a fermentum mollis, lorem ante sagittis est, sed pharetra risus leo sed augue. Aenean sed massa quis elit
tincidunt blandit. Proin elementum cursus pretium. Mauris tempor arcu nec sem ullamcorper dictum. Nulla eu tellus vitae justo aliquet maximus. Fusce id mauris sed sapien fermentum interdum. Nunc laoreet ligula sed quam scelerisque, at faucibus elit
euismod. Donec et est imperdiet, pulvinar augue cursus, tincidunt eros. Donec nec ornare mi. Duis eget lacus sed nisl hendrerit elementum sed vel metus. Integer vel lacus at ex lobortis dignissim non in tortor. Vestibulum sit amet metus non velit varius
tristique. Pellentesque in lorem sed mi efficitur elementum. Suspendisse eu fermentum neque, et rhoncus lectus.</p>