My website is very text-heavy, and I want to break it into pieces automatically based on the content height, like google docs or word does.
So I figured I'd use window.innerHeight to get the full height, and do something like:
$("content").ready(function(){
from(window.innerHeight == 1,window.innerHeight == 70%){
$(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
}
from($(".endpage").innerHeight, $(".endpage").innerHeight + 70%){
$(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
}})
Where the .wrapper div needs to wrap the elements that fill 70% of the screen like so:
<div class="wrapper">
//content filling 70% of the screen height
</div>
<div class="wrapper">
//content filling 70% of the screen height
</div>
But of course, it doesn't work.
How would I do this?
EDIT:
As requested, here is a snippet:
$("content").ready(function() {
from(window.innerHeight == 1, window.innerHeight == 70 % ) {
$(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
}
from($(".endpage").innerHeight, $(".endpage").innerHeight + 70 % ) {
$(this).wrapInner('<div class="wrapper"> </div>').append('<div class="endpage"></div>')
}
})
#import url("https://fonts.googleapis.com/css?family=Lora:400,400i,700,700i");
#import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700,700i");
h1,
h2,
h3,
h4,
h5,
h6,
th,
label {
font-family: "Raleway", sans-serif;
font-weight: 400;
text-align: left;
color: #0a0a0a;
line-height: 1.5em;
}
p,
td {
margin: 0;
font-size: 1.3em;
}
p+p {
text-indent: 2em;
}
ol,
ul {
font-size: 1.3em;
padding: 0em 1em;
margin: 1em 0em;
}
ul ul,
ol ol {
font-size: 1em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content">
<h1>lorem Ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</p>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis
nulla. Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
</ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis
nulla. Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
</ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis nulla.
Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
<ul>
<li>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sed dui vel erat ornare tristique. Nulla tristique rutrum auctor. Etiam sed diam quam. Mauris suscipit tortor ut felis pharetra, eget semper lorem suscipit. Pellentesque sit amet mollis
nulla. Vivamus at est congue, commodo ex id, aliquet dolor. Integer lobortis efficitur velit. Nam vehicula mattis lectus, at malesuada mauris convallis elementum.</li>
</ul>
</ul>
</div>
You could try to define your sections individually:
var wph = $(".wrapper").height(); //this could be window.innerHeight
if( wph > 50 ){
$(".wrapper").wrapInner("<div class='pager'></div>");
}
Then you could define a value using str.length:
$(".wrapper").text().length;
This could help to layout your content.
Related
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>
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
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>
I am struggling to get multiple instances of this tabbed box on one page. I am very new to jquery, and the code I have is copied. The tabbed box works fine, but multiple instances cause problems.
The HTML:
<ul class="tabs">
<li class="active" rel="tab1"> Single Wall Cases</li>
<li rel="tab2">Double Wall Cases</li>
<li rel="tab3">Heavy Duty Cases</li>
<li rel="tab4">Wardrobe Cartons</li>
<li rel="tab5">Archive Boxes</li>
<li rel="tab6">Stitched Wallets</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab4 -->
<div id="tab5" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab5 -->
<div id="tab6" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab6 -->
The CSS:
ul.tabs {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
/* [disabled]border-bottom: 1px solid #999999; */
/* [disabled]border-left: 1px solid #999999; */
width: 100%;
}
ul.tabs li {
margin-top: 0;
margin-right: 0;
margin-left: 2px;
margin-bottom: 0;
cursor: pointer;
padding: 0px 21px;
height: 31px;
line-height: 31px;
border-color: rgba(37,37,37,1.00);
border-left-style: solid;
/* [disabled]border-right-style: solid; */
/* [disabled]border-bottom-style: solid; */
/* [disabled]border-top-style: solid; */
border-width: 1px;
overflow: hidden;
position: relative;
font-family: abel;
font-style: normal;
font-weight: 400;
color: rgba(37,37,37,1.00);
float: left;
}
ul.tabs li:hover {
background: #CCCCCC;
color: rgba(37,37,37,1.00);
}
ul.tabs li.active{
background-color: #8DDF2D;
border-bottom: 1px solid #FFFFFF;
color: rgba(37,37,37,1.00);
}
.tab_container {
border: 1px solid #999999;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
#media (max-width: 600px){
ul.tabs li {
padding-top: 0px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
margin: 0;
font-size: 77%;
float: none;
width: 92px;
}
ul.tabs {
}
.tab_container {
margin-top: 175px;
}
And the Jquery:
<script type="text/javascript">
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
</script>
See the jsfiddle!
I have multiple section tags on my page, and would like this tabbed box in each section.
Here is a working example of the Tabs you wish to have. Check out the code snippet. I hope that is what you are looking for.
$(document).ready(function() {
$(".tab_content").hide();
$(".tab_content:first").show();
$("ul.tabs li").click(function() {
$("ul.tabs li").removeClass("active");
$(this).addClass("active");
$(".tab_content").hide();
var activeTab = $(this).attr("rel");
$("#"+activeTab).fadeIn();
});
});
ul.tabs {
margin-top: 0;
margin-right: 0;
margin-left: 0;
margin-bottom: 0;
padding: 0;
float: left;
list-style: none;
height: 32px;
/* [disabled]border-bottom: 1px solid #999999; */
/* [disabled]border-left: 1px solid #999999; */
width: 100%;
}
ul.tabs li {
margin-top: 0;
margin-right: 0;
margin-left: 2px;
margin-bottom: 0;
cursor: pointer;
padding: 0px 21px;
height: 31px;
line-height: 31px;
display:inline;
border-color: rgba(37,37,37,1.00);
border-left-style: solid;
/* [disabled]border-right-style: solid; */
/* [disabled]border-bottom-style: solid; */
/* [disabled]border-top-style: solid; */
border-width: 1px;
overflow: hidden;
position: relative;
font-family: abel;
font-style: normal;
font-weight: 400;
color: rgba(37,37,37,1.00);
float: left;
}
ul.tabs li:hover {
background: #CCCCCC;
color: rgba(37,37,37,1.00);
}
ul.tabs li.active{
background-color: #8DDF2D;
border-bottom: 1px solid #FFFFFF;
color: rgba(37,37,37,1.00);
}
.tab_container {
border: 1px solid #999999;
clear: both;
float: left;
width: 100%;
background: #FFFFFF;
}
.tab_content {
padding: 20px;
font-size: 1.2em;
display: none;
}
#media (max-width: 600px){
ul.tabs li {
padding-top: 0px;
padding-right: 2px;
padding-left: 2px;
padding-bottom: 0px;
margin: 0;
font-size: 77%;
float: none;
width: 92px;
}
ul.tabs {
}
.tab_container {
margin-top: 175px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="tabs">
<li class="active" rel="tab1"> Single Wall Cases</li>
<li rel="tab2">Double Wall Cases</li>
<li rel="tab3">Heavy Duty Cases</li>
<li rel="tab4">Wardrobe Cartons</li>
<li rel="tab5">Archive Boxes</li>
<li rel="tab6">Stitched Wallets</li>
</ul>
<div class="tab_container">
<div id="tab1" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab1 -->
<div id="tab2" class="tab_content">
<p><img src="../images/web size/Pillow Pak'R 1web.jpg" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab2 -->
<div id="tab3" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab3 -->
<div id="tab4" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab4 -->
<div id="tab5" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab5 -->
<div id="tab6" class="tab_content">
<p><img src="../images/round images/boxes1.png" width="200"> <br />
<strong>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ultrices vel felis id pulvinar. Aliquam vulputate auctor luctus. Etiam nisl lectus, tempor eu justo sit amet, vestibulum viverra ante. Mauris sed condimentum tortor. Duis sed pharetra turpis. Aliquam pulvinar ante quam, ut lobortis dolor faucibus rhoncus. Nullam quis velit nunc. Phasellus aliquam, diam nec finibus blandit, ligula est molestie risus, iaculis pellentesque ipsum magna ut neque. Duis tempus, justo non rhoncus rhoncus, nibh ligula sagittis enim, in pellentesque metus enim at eros. Aenean sit amet ipsum vitae sem tempus fermentum. Vivamus pharetra, metus id hendrerit ultrices, nisl elit congue nunc, non gravida ante mi ac nisl. Cras viverra luctus neque. Cras et dolor imperdiet, dapibus velit sit amet, feugiat nunc. Curabitur iaculis felis vitae convallis ornare.
</strong>
</p>
</div><!-- #tab6 -->
The issue was with display attribute in css
I have tried using the accordion plugin, but it does not work, and I know there is a simpler solution using pure jQuery.
In essence, I would like it so that when you click a <h2> with the class="expand", it should 'expand' the next div with class="collapse". All the divs should be collapsed by default.
Any help would be much appreciated, thanks in advance!
For testing purposes see this jsFiddle demo.
const $headers = $('.header');
const $contents = $('.content');
$headers.on("click", function() {
const $cont = $(this).next(".content");
$contents.not($cont).slideUp(); // Hide all
$cont.slideToggle(); // Toggle one
});
.header { background: #ddd; cursor: pointer; margin: 0; }
.content{ display:none; }
<h2 class="header">Click to expand and collapse</h2>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin
ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut
tortor tempus auctor.</div>
<h2 class="header">Click to expand and collapse 2</h2>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin
ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut
tortor tempus auctor.</div>
<h2 class="header">Click to expand and collapse 3</h2>
<div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin
ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut
tortor tempus auctor.</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
It hides all opened elements before collapsing the closed one.
And it toggles the open state if the element is opened.
This is simple, just use the below
$('.expand').click(function() {
$(this).next('.collapse').slideToggle(); // or use .toggle() for no animation
});
Fiddle: http://jsfiddle.net/garreh/WQYc7/2/
To be collapsed by default just add the below css:
.collapse {
display: none;
}
Use jQuery, I've updated your Fiddle.
HTML:
<div id="accordion">
<h2 class="toggle">Click to expand and collapse</h2>
<div class="pane">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>
<h2 class="toggle">Click to expand and collapse 2</h2>
<div class="pane"><br>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean bibendum dolor nec nunc aliquam placerat. Nullam vehicula nibh felis. Nulla tincidunt aliquam nisl nec sagittis. Donec convallis hendrerit nisl, ut lacinia elit sagittis a. Nullam sollicitudin ultricies nibh, tincidunt adipiscing erat tristique vitae. Sed id ipsum ac ipsum fringilla molestie et sit amet elit. Cras commodo augue id dolor suscipit commodo. Ut varius porta orci, quis dignissim ante adipiscing et. Pellentesque rhoncus purus ut tortor tempus auctor.
</div>
</div>
Javascript:
<script>
$(document).ready(function() {
$('#accordion h2').click(function() {
var $nextDiv = $(this).next();
var $visibleSiblings = $nextDiv.siblings('div:visible');
$(this).toggleClass('current').siblings('h2').removeClass('current');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp('fast', function() {
$nextDiv.slideToggle('fast');
});
} else {
$nextDiv.slideToggle('fast');
}
});
});
</script>
CSS:
.toggle {
background: gray;
padding: 5px;
cursor: pointer;
}
.pane { display: none; }
.current { background: green }