CSS Text Truncation Vertical Alignment - javascript

I have a lorem ipsum text that is truncated. When you press the "readmore »" button it fully displays the text.
My issue is the text shifts up vertically when you press the "readmore »" button.
$(document).ready(function(){
$(".readmore-btn").on("click",function(){
$(".readmore").toggleClass("truncate");
})
});
.truncate {
max-height: 55px;
overflow-y:hidden;
}
.readmore-btn {
color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Text before</h1>
<div class="readmore truncate">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. </p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>


Moving the overflow-y: hidden; from the .truncate class and moving it to the .readmore class resolves the shifting issue.
$(document).ready(function(){
$(".readmore-btn").on("click",function(){
$(".readmore").toggleClass("truncate");
})
});
.readmore {
overflow-y:hidden;
}
.truncate {
max-height: 55px;
}
.readmore-btn {
color: #337ab7;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<h4>Text before</h1>
<div class="readmore truncate">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis vel lacus est. Ut vulputate venenatis mauris porta ornare. Nunc vehicula dapibus sem eget maximus. Vestibulum congue nunc eget feugiat euismod. Praesent porta cursus libero, ut vestibulum leo suscipit non. Vivamus vulputate urna quis tincidunt congue. Vestibulum malesuada neque sit amet eros efficitur pharetra. Vestibulum consequat purus sit amet ex euismod, ut consequat tellus vehicula. Proin suscipit in risus ut placerat. Integer porta id libero ac finibus. Ut at tellus turpis. Phasellus dolor erat, ullamcorper a risus ultrices, iaculis malesuada nisl. Integer tellus arcu, sodales quis mattis ac, sagittis eu turpis. Suspendisse tristique tempor pharetra.</p>
</div>
<div class="readmore-btn">Readmore »</div>
<h4>Text After</h1>


This is caused by the default margins the browsers adds to paragraphs.
Just add
.truncate p{margin:0}
to your css

Related

How to "Read more - Read less only if text is overflowing (else hide read more)"

I am quite nascent with JavaScript and stuck with a bit complex problem.
I want to call "Read more" if body/container has "overflow-text" or "height > given height of "body".
else { hide "Read more" }
not able to do it on my own.
I am pasting my sample of simple read more / read less here.
Request you to please help me improvise it.
const readMoreBtn = document.querySelector('.read-more-btn');
const text = document.querySelector('.text');
readMoreBtn.addEventListener('click',(e)=>{
text.classList.toggle('show-more');
if(readMoreBtn.innerText === 'Read more'){
readMoreBtn.innerText = 'Read less';
}
else{
readMoreBtn.innerText = 'Read more';
}
});
<style>
body{
font-family: Arial;
text-align: justify;
max-width: 600px;
padding: 20px;
background-color: #f0f0f0;
}
.moreText{
display:none;
}
.read-more-btn{
padding: 15px 60px;
border: 1 px solid #828282;
outline: none;
cursor:pointer;
}
.text.show-more .moreText{
display:inline;
}
</style>
<body>
<h1>Hello World</h1>
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa.<span class="moreText"> 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque 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="read-more-btn">Read more</button>
</body>

Use the overflow: hidden; attribute in a div (text-wrapper) that contains the <p> to hide overflowed text, then, just toggle classes when press read-more or read-less.
On read more, put the div height on height: auto;, so the div will adjust to the content height.
const readMoreBtn = document.querySelector('.read-more-btn');
const text = document.querySelector('.text-wrapper');
readMoreBtn.addEventListener('click', (e) => {
text.classList.toggle('show-more');
text.classList.toggle('show-less');
if (readMoreBtn.innerText === 'Read more') {
readMoreBtn.innerText = 'Read less';
} else {
readMoreBtn.innerText = 'Read more';
}
});
body {
font-family: Arial;
text-align: justify;
max-width: 600px;
padding: 20px;
background-color: #f0f0f0;
}
.read-more-btn {
outline: none;
cursor: pointer;
}
.show-less {
height: 200px;
overflow: hidden;
}
.show-more {
height: auto;
}
<body>
<h1>Hello World</h1>
<div class="text-wrapper show-less">
<p class="text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque 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.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas vitae scelerisque 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.</p>
</div>
<br>
<a class="read-more-btn" href="#">Read more</a>
</body>

Zoom Out On Page Messes Alignment

I have the following code:
.aligned {
display: flex;
align-items: top;
}
.p {
padding: 15px;
}
img {
border: 5px solid #555;
}
blockquote {
font-family: Georgia, serif;
font-size: 18px;
font-style: italic;
width: 800px;
margin: 0.25em 0;
padding: 0.35em 40px;
line-height: 1.45;
position: relative;
color: #383838;
}
blockquote:before {
display: block;
padding-left: 10px;
content: "\201C";
font-size: 80px;
position: absolute;
left: -20px;
top: -20px;
color: #7a7a7a;
}
blockquote cite {
color: #999999;
font-size: 14px;
display: block;
margin-top: 5px;
}
blockquote cite:before {
content: "\2014 \2009";
}
img {
display: block;
margin: 0 auto;
max-width: 80%;
height: auto;
}
#media all and (min-width: 768px) {
img {
float: left;
height: 200px; /* image height for larger screen only */
}
}
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
So when you run the above code, open it on a new page, you can see the alignment to be like this:
On my end, it looks like that but when I zoom out on my website, this is the output I get:
Sorry for the blurred photo
That is what my output looks like when I zoom out. I do not want that, is there a way to make it static, meaning even if I zoom out, the output of the above code I sent does not change?
Even if you run the above code, open it on a new page, and zoom out, you can see the text and the image to change its position. However, I want them to be static, meaning not change at all. Any suggestions?
Update
For a better understanding of what I am looking for, then this is the output I get when I zoom out my page at 33%:
As you can see, the text and image are moved towards the left, which is not what I want. I want them to stay where they were before.

Try wrapping everything inside a dedicated parent div like so:
<div>
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/eb/Ash_Tree_-_geograph.org.uk_-_590710.jpg/220px-Ash_Tree_-_geograph.org.uk_-_590710.jpg" width="370" height="500">
<div class="aligned">
<div class="p">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis facilisis consequat. Aenean commodo laoreet mattis. Sed consequat massa magna, quis finibus libero ornare eget. Sed elementum, metus quis elementum porta, lacus dui rhoncus nulla,
a convallis arcu ipsum id erat. Mauris maximus congue mollis. Proin sodales non risus eu porta. Duis iaculis eget quam at suscipit. Aliquam sed erat diam. Nullam dictum urna sit amet vestibulum facilisis. Proin turpis dui, ultrices sit amet tellus
vitae, volutpat tristique turpis. Ut at pretium turpis, ut malesuada mi. Phasellus massa turpis, pretium et diam quis, iaculis sagittis justo.
</p>
<blockquote>
Nothing Is Impossible. The Word Itself Says 'IM Possible'
<cite>Audrey Hepburn</cite>
</blockquote>
</div>
</div>
</div>
If this won't work, please make a JSFiddle that illustrates the problem, or share your website address.

Sidebar links not changing when the chapter titles are reaching the top on scroll, they change earlier

I have a sidebar with anchor links that point to a specific content part when I click on them.
The problem appears when I'm scrolling the content, the link in the sidebar gets highlighted when the section title barely appears at the bottom.
How can I make the link change when the title of chapter content reaches the top of sidebar?
Here's what I tried so far but isn't working exactly as I want.
// Sticky sidebar scroll
let stickyLinks = document.getElementById("scrollspy");
let mainNavLinks = document.querySelectorAll("#scrollspy ul li a");
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
//start from a spe
if(fromTop >= 100){
stickyLinks.classList.add("sticky");
}
else {
stickyLinks.classList.remove("sticky");
}
// add link gray background
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
if (section.offsetTop <= fromTop && section.offsetTop + section.offsetHeight > fromTop) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
container {
width: 75%;
}
.footer {
background-color: #eee;
text-align: center;
height: 150px;
}
#scrollspy ul {
list-style-type: none;
padding: 0;
border: 1px solid #eee;
border-radius: 0.25rem;
}
#scrollspy ul li a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
#scrollspy ul li:first-child {
color: #444;
font-size: 0.9rem;
font-weight: bold;
padding: 1rem;
}
#scrollspy ul li a.current {
background: #eee;
}
.sticky {
position: fixed;
top: 10%;
width: 16%;
background-color: white;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<!--some header on top-->
<div class="row startContent">
<div class="col-sm-3">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
</div>
<!-- content and sidebar -->
<div class="row">
<div class="col-sm-3">
<div id="scrollspy">
<ul>
<li>Contents</li>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</div>
<div class="col-sm-9">
<div id="chapter1">
<h2>Title of Chapter 1</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter2">
<h2>Title of Chapter 2</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter3">
<h2>Title of Chapter 3</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter4">
<h2>Title of Chapter 4</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
<div id="chapter5">
<h2>Title of Chapter 5</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div> <!--End of chapter 0-->
</div>
</div>
</div>

The reason this is happening is because section.offsetTop is returning the position of the section relative to the offset parent. In this case the parent is the div that contains the sections <div class="col-sm-9">.
To fix the problem, we just need to adjust the value for the top of each section to take into account the distance of the parent from the top. We do this as follows:
1. Add an id to the parent container to make it easier to select, e.g.
<div id="chapters-container" class="col-sm-9">
2. Get the offsetTop of the parent so we can add this to the top of the section:
let chaptersTop = document.getElementById("chapters-container").offsetTop;
3. Calculate the actual top position in our scroll listener by adding the distance from the top of the parent container to the position of the section within the parent, which gives us its position from the top of the body in this case. Then we use this when we are checking how far the page is scrolled:
sectionTop = section.offsetTop + chaptersTop;
if (sectionTop <= fromTop && (sectionTop + section.offsetHeight) > fromTop) {
//...
}
Working Example:
(FYI, you aren't closing your li elements in your code, I fixed that here)
// Sticky sidebar scroll
let stickyLinks = document.getElementById("scrollspy");
let mainNavLinks = document.querySelectorAll("#scrollspy ul li a");
let chaptersTop = document.getElementById("chapters-container").offsetTop;
window.addEventListener("scroll", event => {
let fromTop = window.scrollY;
if (fromTop >= 100) {
stickyLinks.classList.add("sticky");
} else {
stickyLinks.classList.remove("sticky");
}
// add link gray background
mainNavLinks.forEach(link => {
let section = document.querySelector(link.hash);
sectionTop = section.offsetTop + chaptersTop;
if (sectionTop <= fromTop && (sectionTop + section.offsetHeight) > fromTop) {
link.classList.add("current");
} else {
link.classList.remove("current");
}
});
});
h2 {
font-size: 18px;
}
p {
font-size: 12px;
}
container {
width: 75%;
}
.footer {
background-color: #eee;
text-align: center;
height: 150px;
}
#scrollspy ul {
list-style-type: none;
padding: 0;
border: 1px solid #eee;
border-radius: 0.25rem;
}
#scrollspy ul li a {
text-decoration: none;
padding: 0.5rem 1rem;
display: block;
}
#scrollspy ul li:first-child {
color: #444;
font-size: 0.9rem;
font-weight: bold;
padding: 1rem;
}
#scrollspy ul li a.current {
background: #eee;
}
.sticky {
position: fixed;
top: 10%;
width: 16%;
background-color: white;
z-index: 1;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<div class="container">
<!--some header on top-->
<div class="row startContent">
<div class="col-sm-3">
<h4>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h4>
</div>
<div class="col-sm-9">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat. Praesent
tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna consectetur eleifend.
Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
</div>
<!-- content and sidebar -->
<div class="row">
<div class="col-sm-3">
<div id="scrollspy">
<ul>
<li>Contents</li>
<li>Link 1
</li>
<li>Link 2
</li>
<li>Link 3
</li>
<li>Link 4
</li>
<li>Link 5
</li>
</ul>
</div>
</div>
<div class="col-sm-9" id="chapters-container">
<div id="chapter1">
<h2>Title of Chapter 1
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter2">
<h2>Title of Chapter 2
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter3">
<h2>Title of Chapter 3
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter4">
<h2>Title of Chapter 4
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
<div id="chapter5">
<h2>Title of Chapter 5
<h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis ultricies, lacus eu viverra euismod, arcu dolor condimentum augue, vel congue est ante sit amet purus. Quisque non nunc ut urna gravida porta. Duis sodales vitae tortor in feugiat.
Praesent tellus ante, pharetra sed mauris at, eleifend semper nisl. Donec condimentum purus eget viverra euismod. Ut felis ipsum, sagittis sodales faucibus suscipit, tempus a ante. Integer ac dignissim libero. In tincidunt purus at urna
consectetur eleifend. Nullam hendrerit nulla et enim auctor rhoncus. Pellentesque interdum augue nec augue pulvinar fermentum. Phasellus imperdiet elit id arcu vehicula, ac commodo mauris hendrerit.</p>
</div>
<!--End of chapter 0-->
</div>
</div>
</div>

How to use a the toggle button multiple times efficiently?

I have the following page, which is behaving exactly how I want it to.
However, I know the page can be written more efficiently in two ways:
First and most importantly, I am repeating a javascript function. This is to denote which text should be expanded when its specific button is clicked, but I know the two can be written as one since they share the same type of functionality.
Second, the css is clumsy. I've used !important to override whether text is shown or hidden.
Can someone please suggest the most eloquent rendition of this page?
Thank you!
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.very-hidden {
display: none!important;
}
.mystyle {
display: block!important;
}
</style>
</head>
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand1()">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand2()">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
<script type="text/javascript">
function expand1() {
var element = document.getElementById("myDIV1");
element.classList.toggle("mystyle");
var element = document.getElementById("b1");
element.classList.toggle("very-hidden");
}
function expand2() {
var element = document.getElementById("myDIV2");
element.classList.toggle("mystyle");
var element = document.getElementById("b2");
element.classList.toggle("very-hidden");
}
</script>
</body>

Try this:
Use the same class to hidde the elements, and use the same function passing a variable with the number of the div you are clicking, so you can so you can build the id name of the button and the div.
function expand(number) {
var id = 'myDIV'+ number
var divElement = document.getElementById(id);
divElement.classList.toggle("mystyle");
var idButton = 'b'+ number
var button = document.getElementById(idButton);
button.classList.toggle("hidden");
}
.expand-button {
background-color: #1860ac;
color: white;
border-radius: 5px;
height: 30px;
margin: 15px auto 40px auto;
display: block;
font-family: 'Cabin', sans-serif;
font-size: 1em;
}
.hidden {
display: none;
}
.mystyle {
display: block;
}
<body>
<h2>
First Paragraph
</h2>
<button class="expand-button" id="b1" onclick="expand('1')">Read more</button>
<span class="hidden" id="myDIV1"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed eu magna vitae ipsum dignissim euismod. Curabitur egestas congue elit vitae accumsan. Integer aliquet dictum est, vitae placerat arcu dapibus commodo. Quisque nec libero sed urna tristique mattis sed vel lacus. Praesent ut justo eget elit mattis suscipit. Curabitur ut libero eros. Morbi nec viverra velit. Suspendisse at nulla quis purus luctus laoreet. Nunc euismod ultricies quam vitae mattis. Fusce auctor urna at libero dapibus, sed sollicitudin ex facilisis. Maecenas ultricies nisl sodales lectus ultricies volutpat. Sed pretium turpis vitae dui tincidunt, ac sagittis ante efficitur.</p>
</span>
<h2>
Second Paragraph
</h2>
<button class="expand-button" id="b2" onclick="expand('2')">Read more</button>
<span class="hidden" id="myDIV2">
<p>Nunc porttitor, quam vel consectetur feugiat, ipsum justo accumsan urna, non egestas ante ipsum in tellus. Maecenas pretium, velit dictum ultricies convallis, neque justo aliquet dolor, sed tincidunt massa ipsum at justo. Integer auctor auctor pretium. Ut in lacus ex. Suspendisse id placerat sapien, sed placerat dui. Curabitur eget malesuada arcu. Nam fringilla imperdiet mauris, at malesuada dolor tempor sit amet. Nam feugiat mi vel accumsan tristique. Curabitur imperdiet mollis mi vel consequat. Nam sollicitudin, elit sit amet tincidunt consectetur, sapien elit blandit lorem, at semper ipsum enim eget eros. Cras in ultrices dolor. Maecenas a lacus risus. Duis sed leo id est ultricies rhoncus ac sed ex. Fusce commodo consectetur nunc, sed lacinia sem.
</p>
</span>
</body>
Hope this help you :)

How to style the toggle effect?

I am a newbie to html and CSS. I am designing a website for our conference.I am using the following code to get a toggle effect for the invited speakers of our conference which will give a drop down list box carrying their research interests.
<tr><tr><tr><td><th></th></td></tr></tr></tr><!DOCTYPE html>
<html>
<head>
<style>
.maindrop{
width:50%;
}
.bar{
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
}
.bar:hover{
background: gray;
}
.dropbox{
height: 0;
transition: 1s;
overflow: hidden;
width : 100%;
transition-property: background;
transition-timing-function: linear;
}
.dropbox:target{
height:auto;
}
</style>
</head>
<body>
<div class="maindrop">
<div class="fold default">
<a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold" >
<a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
</div>
</body>
</html>
Quesitons:
First of all the animation is not working properly. The drop down box should come slowly and gently. ( I think I am missing some animation effect!!!)
What I am missing??
Second thing, for the first click drop down box visible, then in the second click one can make the box to reset know. How to do that?
PS: If there any styling option which will make the look better, kindly feel free to edit the code. I will be expecting a pleasant and elegant way of giving information about the speakers of the conference.

.maindrop {
width: 50%;
}
.bar {
padding: 20px;
color: white;
background: #1FB5AC;
display: block;
font-family: Times;
text-decoration: none;
font-size: 16px;
transition: .2s ease-out;
}
.bar:hover {
background: gray;
}
.dropbox {
max-height: 0;
transition: .2s ease-out;
overflow: hidden;
width: 100%;
}
.dropbox:target {
max-height: 300px;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="maindrop">
<div class="fold default">
<a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
<div class="fold">
<a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.
</div>
</div>
</div>
</body>
</html>

First of all the animation is not working properly.
The main issue you have is that the browser cannot animate between height:0; and height:auto; - the browser needs an explicit start point and an explicit end point to animate between.
So you could (for example) animate between height:0; and height:200px; - but the problem (self-evidently) with that is that not all the Speaker Profiles will be the same length and you don't want to have to manually input different heights for each new profile (including when each profile is edited).
So, the solution is to apply the height value through javascript instead of CSS. Then you can animate between:
dropbox.style.height = '0';
and
dropbox.style.height = dropbox.scrollHeight + 'px';
The second issue you have is that an open dropbox is not closing when clicked on for a second time. This is because you are using the :target pseudo-class to detect the first click... but then if you click for a second time on the same dropbox... the dropbox is still the focus of :target - so nothing changes.
Instead you can add and remove the class .open using javascript. The script will check to see if the fold is open - if it isn't, it will open it, if it isn't, it will close it.
Working example (with Speaker Profiles of different lengths):
var folds = document.getElementsByClassName('fold');
function toggle(fold) {
var dropbox = fold.getElementsByClassName('dropbox')[0];
if (fold.classList.contains('open')) {
dropbox.style.height = '0';
}
else {
dropbox.style.height = dropbox.scrollHeight + 'px';
}
fold.classList.toggle('open');
}
function speakersAccordion() {
var openFolds = document.getElementsByClassName('open');
for (var i = 0; i < openFolds.length; i++) {
if (openFolds[i] === this) continue;
toggle(openFolds[i]);
}
toggle(this);
}
for (var i = 0; i < folds.length; i++) {
folds[i].addEventListener('click',speakersAccordion, false);
}
.maindrop{
width:50%;
}
.bar {
display: block;
padding: 20px;
font-family: Times, serif;
font-size: 16px;
text-decoration: none;
color: white;
background-color: #1FB5AC;
}
.bar:hover {
background-color: gray;
}
.dropbox {
height: 0;
transition: all 0.5s ease-out;
overflow: hidden;
width : 100%;
}
.dropbox p:first-of-type {
margin-top: 0;
}
<div class="maindrop">
<div class="fold default">
<a class="bar" href="#tab1">Speaker 1</a>
<div class="dropbox" id='tab1'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
</div>
</div>
<div class="fold" >
<a class="bar" href="#tab2"> Speaker 2</a>
<div class="dropbox" id='tab2'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
</div>
</div>
<div class="fold">
<a class="bar" href="#tab3"> Speaker 3</a>
<div class="dropbox" id='tab3'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis.</p>
</div>
</div>
<div class="fold">
<a class="bar" href="#tab4"> Speaker 4</a>
<div class="dropbox" id='tab4'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam diam enim, interdum eget iaculis in, pretium non libero. Pellentesque id interdum risus, vitae iaculis ipsum. Duis mi tortor, sodales nec nisl nec, venenatis sollicitudin turpis. Pellentesque hendrerit nec massa sit amet scelerisque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Pellentesque a mi sit amet metus hendrerit placerat. Duis ullamcorper lectus vel erat luctus egestas. Maecenas pharetra justo sed nulla blandit, ut viverra diam posuere.</p>
</div>
</div>
</div>

Categories