So I have four boxes each with a data attribute that I use to target four other boxes which I display and hide. I kinda have the function working how I would like.
But say I click box one then box two they are both showing. What I would like is only the box which was clicked last to display while all the others hide. If box one is clicked the box for it will display, if it is clicked again it will hide.
This is what I have so far:
$(document).ready(function(){
$(".click").click(function(){
var current_sec = $(this).data("section");
if($(this).hasClass("clicked")){
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else{
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
}
});
});
.click{
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one{
background-color: blue;
}
#two{
background-color: yellow;
}
#three{
background-color: red;
}
#four{
background-color: orange;
}
.sections{
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
}
.show{
max-height: 1000px;
}
#section_1{
background-color: blue;
}
#section_2{
background-color: yellow;
}
#section_3{
background-color: red;
}
#section_4{
background-color: orange;
}
<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>
<div class="sections" id="section_1">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_2">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_3">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_4">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
You need to remove show class whenever the boxes are cleared and secondly, because you need show/hide, you also need to remove clicked class in the else condition:
$(document).ready(function() {
$(".click").click(function() {
$('.sections.show').removeClass('show');
var current_sec = $(this).data("section");
if ($(this).hasClass("clicked")) {
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else {
$('.click.clicked').removeClass('clicked');
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
}
});
});
.click {
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one {
background-color: blue;
}
#two {
background-color: yellow;
}
#three {
background-color: red;
}
#four {
background-color: orange;
}
.sections {
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
}
.show {
max-height: 1000px;
}
#section_1 {
background-color: blue;
}
#section_2 {
background-color: yellow;
}
#section_3 {
background-color: red;
}
#section_4 {
background-color: orange;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>
<div class="sections" id="section_1">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<div class="sections" id="section_2">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<div class="sections" id="section_3">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<div class="sections" id="section_4">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Remove the active classes from click and sections except the current one by using jQuery not() selector:
$(".sections").not(this).removeClass("show");
$('.click').not(this).removeClass("clicked");
See demo below:
$(document).ready(function() {
$(".click").click(function() {
var current_sec = $(this).data("section");
// remove active from other tabs
$(".sections").not(this).removeClass("show");
$('.click').not(this).removeClass("clicked");
if ($(this).hasClass("clicked")) {
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else {
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
}
});
});
.click {
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one {
background-color: blue;
}
#two {
background-color: yellow;
}
#three {
background-color: red;
}
#four {
background-color: orange;
}
.sections {
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
}
.show {
max-height: 1000px;
}
#section_1 {
background-color: blue;
}
#section_2 {
background-color: yellow;
}
#section_3 {
background-color: red;
}
#section_4 {
background-color: orange;
}
<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>
<div class="sections" id="section_1">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<div class="sections" id="section_2">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<div class="sections" id="section_3">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<div class="sections" id="section_4">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat
magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat
neque.
</p>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
Try adding this to your else as the first line, to remove the show class from any section that was previously shown.
//remove clicked from the previously clicked elements
$('.click.clicked').removeClass('clicked');
//remove show from the reviously shown sections
$('.sections.show').removeClass('show');
You can use straight CSS with showing and hiding. No custom classes necessary. This should be what you are looking for.
$(document).ready(function(){
$(".click").click(function(){
var current_sec = $(this).data("section");
// hide all sections first
$('.sections').css("display", "none");
// find the clicked section id
var clickedId = $(this).attr('data-section');
// show clicked section
$('#' + clickedId).css("display", "");
});
});
.click{
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one{
background-color: blue;
}
#two{
background-color: yellow;
}
#three{
background-color: red;
}
#four{
background-color: orange;
}
.sections{
width: 500px;
font-size: 18px;
overflow: hidden;
}
.show{
max-height: 1000px;
}
#section_1{
background-color: blue;
}
#section_2{
background-color: yellow;
}
#section_3{
background-color: red;
}
#section_4{
background-color: orange;
}
<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>
<div class="sections" id="section_1">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_2">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_3">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<div class="sections" id="section_4">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque.</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
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 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 :)
I have a function that displays and hides content. The only thing I cant figure out is how to always have the most recently displayed element always display on top of the others as they fade out. If you click the buttons left to right you can see how I want it to work. But right to left doesn't work the same way due to the order of the html. I thought about using index but I couldn't think of how to get it to work. Help me?
$(document).ready(function(){
$(".click").click(function(){
var current_sec = $(this).data("section");
$(".sections").not(this).removeClass("show");
$('.click').not(this).removeClass("clicked");
if($(this).hasClass("clicked")){
$("#" + current_sec).removeClass("show");
$(this).removeClass("clicked");
} else{
$(this).addClass("clicked");
$("#" + current_sec).addClass("show");
$(".show_all").removeClass("all_open");
$(".show_all").html("Our skills");
}
});
$(".show_all").click(function(){
if($(".show_all").hasClass("all_open")){
$(".sections").removeClass("show");
$(".show_all").removeClass("all_open");
$(".click").removeClass("clicked");
$(".show_all").html("Our skills");
} else{
$(".sections").addClass("show");
$(".show_all").addClass("all_open");
$(".show_all").html("close skills");
}
});
});
.click{
display: inline-block;
height: 50px;
width: 50px;
margin: 0 20px;
cursor: pointer;
}
#one{
background-color: lightblue;
}
#two{
background-color: yellow;
}
#three{
background-color: red;
}
#four{
background-color: orange;
}
.sections{
width: 500px;
font-size: 18px;
max-height: 0px;
overflow: hidden;
opacity: 0;
transition: all 1.5s ease;
}
.show{
opacity: 1;
max-height: 1000px;
}
#section_1{
background-color: lightblue;
}
#section_2{
background-color: yellow;
}
#section_3{
background-color: red;
}
#section_4{
background-color: orange;
}
.show_all{
font-weight: 800;
color: black;
}
<div id="one" class="click" data-section="section_1"></div>
<div id="two" class="click" data-section="section_2"></div>
<div id="three" class="click" data-section="section_3"></div>
<div id="four" class="click" data-section="section_4"></div>
<div class="sections" id="section_1">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<div class="sections" id="section_2">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<div class="sections" id="section_3">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<div class="sections" id="section_4">
<div class="box"></div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lobortis augue quis lectus sollicitudin venenatis. Vestibulum quam nisi, condimentum ac diam ut, aliquam dignissim odio. Nulla nulla arcu, convallis quis ipsum tempor, volutpat placerat magna. Praesent non neque maximus, sollicitudin eros vitae, mattis augue. Donec ac semper purus. Vivamus a elit eu risus porttitor mollis. Cras efficitur quam sed nisi facilisis volutpat. Mauris in arcu nec magna ullamcorper luctus. Cras non placerat neque. our skills</p>
</div>
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous"></script>
Like this but you have an effect new problem.
...
$(this).removeClass("clicked");
} else{
// move the div on top, after last .click
$('.click:last').after( $("#" + current_sec));
$(this).addClass("clicked");
...
Store a z-index in a variable. Increment it on each click, and assign it to the shown section. This way, the latest shown section will always be on top.
var zIndex = 1;
$(".click").click(function(){
// ...
$("#" + current_sec).addClass("show").css("z-index", ++zIndex)
}
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