I came across this accordion I would like to use for my site:
http://jsfiddle.net/subhranild/u5d35La7/1/
<div class="accordion">
<div class="accorfion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
$(document).ready(function(){
$('.accordion-section-title').click(function(e){
var currentAttrvalue = $(this).attr('href');
if($(e.target).is('.active')){
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
});
however, whenever one of the headers is opened, the scroll moves to have the opened content at the top of the page. How can I edit this code to disable the auto-scroll?
I've seen some people online saying change the href to equal #, but when I do that the accordion no longer works.
Thanks.
Just by adding e.preventDefault(); on the click function in your Javascript as below working example.
$(document).ready(function() {
$('.accordion-section-title').click(function(e) {
e.preventDefault();
var currentAttrvalue = $(this).attr('href');
if($(e.target).is('.active')) {
$(this).removeClass('active');
$('.accordion-section-content:visible').slideUp(300);
} else {
$('.accordion-section-title').removeClass('active').filter(this).addClass('active');
$('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
}
});
});
.wrapper {
height: 100%;
}
.accordion
{
overflow:hidden;
border-radius:4px;
background:#f7f7f7;
}
.accordion-section-title
{
width:100%;
padding:15px;
}
.accordion-section-title
{
width: 100%;
padding: 15px;
display: inline-block;
background-color: #333;
border-bottom: 1px solid #1a1a1a;
font-size: 1.2em;
color: #fff;
transition: all linear 0.5s;
text-decoration:none;
}
.accordion-section-title.active
{
background-color:#4c4c4c;
text-decoration:none;
}
.accordion-section-title:hover
{
background-color:grey;
text-decoration:none;
}
.accordion-section:last-child .accordion-section-title
{
border-bottom:none;
}
.accordion-section-content
{
padding:15px;
display:none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
</p>
<div class="accordion">
<div class="accorfion-section">
<a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
<div id="accordion-1" class="accordion-section-content">
<p>This is first accordion section</p>
</div>
<a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
<div id="accordion-2" class="accordion-section-content">
<p> this is second accordian section</p>
</div>
<a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
<div id="accordion-3" class="accordion-section-content">
<p> this is third accordian section</p>
</div>
</div>
</div>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium voluptates earum facilis eveniet mollitia assumenda aperiam, ex temporibus neque aspernatur similique eligendi est harum obcaecati, ipsam velit, quis doloremque expedita, hic! Soluta, omnis itaque optio, inventore, assumenda totam adipisci vel eius, distinctio amet dolorem tempore sit. Accusamus, voluptas! Quam animi, esse soluta porro nesciunt incidunt nisi autem distinctio corrupti, dolores impedit obcaecati. Sequi sit facilis, accusamus neque quod tempore, amet ratione, veritatis commodi, velit necessitatibus dolorum maxime. Facere qui esse, rerum quo nihil, accusamus sint assumenda. Eaque asperiores recusandae, dolores omnis tempore laborum sequi ipsa unde in ipsam dolore maxime.
</p>
</div>
Related
I'm new to JavaScript so with the help of the community I manage to create that code but I want the slide down when I click on a project to have a smooth animation but I don't know where to put the animation code transition: all .5s ease-in-out; in the CSS or I don't know if I can do it with the JavaScript code directly.
const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
elm.addEventListener("click", function() {
let projectContent = elm.querySelector(".project-content");
let arrow = elm.querySelector(".arrow-down");
if (projectContent.style.display !== "none") {
projectContent.style.display = "none";
arrow.classList.toggle('rotate-arrow')
} else {
projectContent.style.display = "flex";
arrow.classList.toggle('rotate-arrow')
}
});
});
body {
background-color: purple;
}
.projet-contain {
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview {
display: flex;
justify-content: space-between;
align-items: center;
}
section>div>div>a {
text-decoration: none;
color: white;
}
.convertigo {
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%);
/* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
.project-content {
justify-content: center;
}
<section>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quo iure culpa libero? Dolor incidunt, adipisci, dignissimos sunt odio expedita ullam sapiente officiis, architecto culpa reiciendis voluptatum ut dolorum ipsa vero nihil? Earum voluptate molestiae nemo! Iste, sit neque. Accusantium, sed aliquam omnis ut laboriosam maxime obcaecati libero natus eius perferendis ipsum ipsam. Nostrum facilis blanditiis voluptas ipsa molestiae inventore consequatur unde velit quas quod, quo obcaecati commodi praesentium? Earum cumque velit vero a facilis voluptatem quis debitis molestiae tenetur consequuntur, commodi architecto beatae id quas rerum unde rem alias itaque amet sed explicabo. Ad rem, quod possimus dignissimos deleniti molestiae natus magni ducimus sit quis dicta voluptatibus itaque quasi reprehenderit facilis fuga soluta alias! Quasi suscipit soluta dignissimos nulla iusto dolores amet temporibus, molestias debitis voluptate praesentium similique distinctio corrupti. Provident numquam cum nostrum aut commodi incidunt ipsam quibusdam laudantium mollitia aspernatur, magni ab perspiciatis inventore exercitationem consequuntur, laborum autem dolorum doloremque omnis voluptatibus illo nesciunt? Ipsam voluptas atque blanditiis alias facere laudantium error doloremque maiores magni enim deserunt iste architecto, voluptatem, porro quisquam quas, deleniti tempore. Sed tempore nulla, perspiciatis natus temporibus debitis maiores ipsam illum esse ut maxime quia in consequuntur ratione error veritatis, quod aut! Enim.</a>
<div>
<img src="images/matete.webp" alt="">
</div>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 2</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content" style="display:none;">
<a>c'est la div 3</a>
</div>
</div>
</section>
Is this what you're looking for?
const projectContain = document.querySelectorAll(".projet-contain");
projectContain.forEach((elm) => {
elm.addEventListener("click", function() {
let projectContent = elm.querySelector(".project-content");
let arrow = elm.querySelector(".arrow-down");
arrow.classList.toggle('rotate-arrow');
projectContent.classList.toggle("display");
});
});
body {
background-color: purple;
}
.projet-contain {
display: flex;
flex-direction: column;
margin-bottom: 50px;
width: auto;
height: auto;
background: radial-gradient(circle, rgba(238, 174, 202, 0.200) 0%, rgba(148, 188, 233, 0.200) 100%);
;
border-radius: 10px 10px 10px 10px;
padding: 10px;
user-select: none;
}
.preview {
display: flex;
justify-content: space-between;
align-items: center;
}
section>div>div>a {
text-decoration: none;
color: white;
}
.convertigo {
width: 10vw;
}
.arrow-down {
transition: transform 0.5s;
width: 1.5vw;
-webkit-filter: invert(100%);
/* safari 6.0 - 9.0 */
filter: invert(100%);
}
.rotate-arrow {
transform: rotate(180deg);
}
.project-content {
justify-content: center;
max-height: 0;
overflow: hidden;
transition: max-height 500ms ease-out;
}
.display {
max-height: 100vh;
}
<section>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content">
<a>c'est la div 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Cum quo iure culpa libero? Dolor
incidunt, adipisci, dignissimos sunt odio expedita ullam sapiente officiis, architecto culpa reiciendis
voluptatum ut dolorum ipsa vero nihil? Earum voluptate molestiae nemo! Iste, sit neque. Accusantium, sed
aliquam omnis ut laboriosam maxime obcaecati libero natus eius perferendis ipsum ipsam. Nostrum facilis
blanditiis voluptas ipsa molestiae inventore consequatur unde velit quas quod, quo obcaecati commodi
praesentium? Earum cumque velit vero a facilis voluptatem quis debitis molestiae tenetur consequuntur, commodi
architecto beatae id quas rerum unde rem alias itaque amet sed explicabo. Ad rem, quod possimus dignissimos
deleniti molestiae natus magni ducimus sit quis dicta voluptatibus itaque quasi reprehenderit facilis fuga
soluta alias! Quasi suscipit soluta dignissimos nulla iusto dolores amet temporibus, molestias debitis
voluptate praesentium similique distinctio corrupti. Provident numquam cum nostrum aut commodi incidunt ipsam
quibusdam laudantium mollitia aspernatur, magni ab perspiciatis inventore exercitationem consequuntur, laborum
autem dolorum doloremque omnis voluptatibus illo nesciunt? Ipsam voluptas atque blanditiis alias facere
laudantium error doloremque maiores magni enim deserunt iste architecto, voluptatem, porro quisquam quas,
deleniti tempore. Sed tempore nulla, perspiciatis natus temporibus debitis maiores ipsam illum esse ut maxime
quia in consequuntur ratione error veritatis, quod aut! Enim.</a>
<div>
<img src="images/matete.webp" alt="">
</div>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content">
<a>c'est la div 2</a>
</div>
</div>
<div class="projet-contain">
<div class="preview">
<a>Projet Convertigo</a>
<img class="arrow-down" src="images/down-arrow-svgrepo-com.svg" alt="ꜜ">
<img src="images/Convertigo.png" class="convertigo" alt="">
</div>
<div class="project-content">
<a>c'est la div 3</a>
</div>
</div>
</section>
I have a tabbed section which showcases 1 .section__content area based on what tab is clicked.
In my demo below, I have used fadeTo( "slow", 1 ) instead of fadeOut(), so that the parent div isn't always resizing after tab change. However, if I click on tab-2 it'll render below where tab-1 would be (because the opacity is 0, but block height is still there). But, if I do display: none, the fade effects are not fluent.
$(function() {
$(".section__label:first").addClass("active");
$(".section__content:first").fadeIn();
$('.section__label').click(function() {
var id = $(this).attr('data-item');
$(".section__label").removeClass("active");
$(this).addClass("active");
$(".section__content").fadeTo( "slow", 0 );
$(".section__content[data-item='"+id+"']").fadeTo( "slow", 1 );
});
});
.section {
background: lightblue;
padding: 100px 0;
border: 1px solid black;
}
.section__tabs {
display: flex;
flex-direction: column;
}
.section__label {
cursor: pointer;
display: inline-block;
}
.section__label.active {
color: orange;
}
.section__content {
display: none;
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-3">
<div class="section__tabs">
<span class="section__label" data-item="tab-1">Tab 1</span>
<span class="section__label" data-item="tab-2">Tab 2</span>
<span class="section__label" data-item="tab-3">Tab 3</span>
</div>
</div>
<div class="col-7">
<div class="section__content" data-item="tab-1">
<p>Text for tab 1</p>
</div>
<div class="section__content" data-item="tab-2">
<p>Text for tab 2</p>
</div>
<div class="section__content" data-item="tab-3">
<p>Text for tab 3</p>
</div>
</div>
</div>
</div>
</div>
Here's a way to do that using fadeIn() and fadeOut(). I also added in a locking mechanism to prevent the UI from getting over-clicked.
https://api.jquery.com/fadein/
let locked = false;
$(function() {
$(".section__label:first").addClass("active");
$(".section__content:first").addClass("active");
$('.section__label').click(function() {
if (locked) return;
locked = true;
var id = $(this).attr('data-item');
$(".section__label").removeClass("active");
$(this).addClass("active");
$(".section__content.active").fadeOut(500, function() {
$(this).removeClass("active");
$(".section__content[data-item='" + id + "']").addClass('active').fadeIn(1000, function() {
locked = false;
})
});
});
});
.section {
background: lightblue;
padding: 100px 0;
border: 1px solid black;
}
.section__tabs {
display: flex;
flex-direction: column;
}
.section__label {
cursor: pointer;
display: inline-block;
}
.section__label.active {
color: orange;
}
.section__content {
border: 1px solid red;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-3">
<div class="section__tabs">
<span class="section__label" data-item="tab-1">Tab 1</span>
<span class="section__label" data-item="tab-2">Tab 2</span>
<span class="section__label" data-item="tab-3">Tab 3</span>
</div>
</div>
<div class="col-7">
<div class="section__content" data-item="tab-1">
<p>Text for tab 1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-2">
<p>Text for tab 2 .Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-3">
<p>Text for tab 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
</div>
</div>
</div>
</div>
Here's another option. Instead of hide()/show(), you can use css transitions along with opacity and max-height to create an accordian effect.
$(function() {
$(".section__label:first").addClass("active");
$(".section__content:first").addClass("active");
$('.section__label').click(function() {
var id = $(this).attr('data-item');
$(".section__label").removeClass("active");
$(this).addClass("active");
$(".section__content.active").removeClass('active');
$(".section__content[data-item='" + id + "']").addClass('active');
});
});
.section {
background: lightblue;
padding: 100px 0;
border: 1px solid black;
}
.section__tabs {
display: flex;
flex-direction: column;
}
.section__label {
cursor: pointer;
display: inline-block;
}
.section__label.active {
color: orange;
}
.section__content {
max-height: 0;
opacity: 0;
overflow: hidden;
transition: all .4s ease-in-out;
border: 1px solid red;
}
.section__content.active {
max-height: 1000px;
opacity: 1;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
<div class="section">
<div class="container">
<div class="row justify-content-between">
<div class="col-3">
<div class="section__tabs">
<span class="section__label" data-item="tab-1">Tab 1</span>
<span class="section__label" data-item="tab-2">Tab 2</span>
<span class="section__label" data-item="tab-3">Tab 3</span>
</div>
</div>
<div class="col-7">
<div class="section__content" data-item="tab-1">
<p>Text for tab 1. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-2">
<p>Text for tab 2 .Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
<div class="section__content" data-item="tab-3">
<p>Text for tab 3. Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim
ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit,
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam </p>
</div>
</div>
</div>
</div>
</div>
I am working on a blog layout which have its content on the left side and a 'table of contents' sidebar on the right. The sidebar is fixed with a full viewport height but scrollable incase the items inside are too many.
It is also worth noting that the active state changes on the links in the sidebar based on their corresponding content in the viewport. What I mean to say is that whenever a blog post is in the viewport, its link gets active state in the sidebar. And it is done by Intersection Observer API.
Now the core functionality works fine except there is one issue.
When there are a lot of blog posts, there will be a lot of links on the sidebar. So naturally the bottom links are not visible on the sidebar as they are at the bottom and can't be seen until the scrollbar is pulled down. Therefore, the active state is not visible as well.
Suppose a user tries to read blog post Text 8, the corresponding Text 8 link should've been visible on the sidebar but it is not. Only upto Text 7 is visible in the demo (based on my viewport).
What I wanted to achieve is how can I move the scrollbar up and down based on which blog posts the user is reading? I mean if the user is reading Text 8 then the sidebar will scroll downward and show Text 8 link. If he is reading Text 9, it will scroll to Text 9 link. Now if he decides to read Text 7 from Text 9 then the scrollbar will move upward two places and display Text 7 link.
I don't know if I could explain it properly but this is the best I could write.
It would be a great help if you could help me with this.
Here's the codepen.
Here's the snippet:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>
You can solve this by setting the scrollbar position to the specific offset as the active class changes. This could be achieved by editing your JS and adding the scrolling logic to the add addClass('active') section.
Basically you have to update the scrollbar position as the active class is added to any link.
document.querySelector("#aside-content").scrollTo(0,position)
And the position to which the scrollbar has to be set, can be fetched from the current active element's/link's offset.
document.querySelector("#aside-content > div > div > a.active").offsetTop
Therefore just after adding class the above stated steps can be done
$(eachLink).addClass('active');
var position = document.querySelector("#aside-content > div > div > a.active").offsetTop;
document.querySelector("#aside-content").scrollTo(0,position);
But, the above code will always set the position, and due to which at first link will set the scrolling to itself and not let "table of contents" text to be visible ever. To fix this situation, updating logic can be made conditional by checking if the active element is first child of the scrolling div.
So, the overall working code should be as follow:
const asideContent = $('#aside-content .aside-content');
const asideContentItem = $('#aside-content a');
const callback = (entries, observer) => {
$(entries).each((idx, item) => {
const navItem = $('#' + item.target.id);
if (item.isIntersecting) {
$(asideContentItem).each((i, eachLink) => {
if ($(eachLink).attr("href") === ('#' + $(navItem).attr('id'))) {
$(eachLink).addClass('active');
if (document.querySelector("#aside-content > div > div > a.active").parentNode.firstElementChild != document.querySelector("#aside-content > div > div > a.active")) {
document.querySelector("#aside-content").scrollTo(0, document.querySelector("#aside-content > div > div > a.active").offsetTop);
} else {
document.querySelector("#aside-content").scrollTo(0, 0);
}
} else {
$(eachLink).removeClass('active');
}
})
}
})
};
const options = {
threshold: 0.2
};
const observer = new IntersectionObserver(callback, options);
const container = $('#main');
const targetElements = $('.main-content .inner-container');
$(targetElements).each((idx, item) => {
observer.observe(item);
});
.header-content {
background-color: blue;
height: 800px;
margin: 20px 0;
}
#main {
margin: 20px auto;
}
.main-content {
background-color: cyan;
}
#aside-content {
position: sticky;
top: 0;
align-self: flex-start;
background-color: red;
height: 100vh;
overflow-y: auto;
}
#aside-content a {
display: block;
margin: 40px auto;
text-decoration: none;
}
#aside-content a.active {
background-color: rgba(0, 255, 0, 0.5);
}
.aside-fixed {
position: fixed;
top: 0;
right: 0;
}
footer {
background-color: brown;
height: 200px;
}
<link href="https://stackpath.bootstrapcdn.com/bootswatch/4.5.2/litera/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">Test</a>
</nav>
<section class="container">
<div class="row">
<div class="col-md-12">
<div class="header-content">
<h3>header content</h3>
</div>
</div>
</div>
</section>
<section class="container" id="main">
<div class="row">
<div class="col-8">
<div class="main-content">
<div id="text1" class="inner-container">
<h2>Text 1</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit.
</div>
<div id="text2" class="inner-container">
<h2>Text 2</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harumti aspernatur delectus mollitia libero similique assumenda quos sequi eligendi?
</div>
<div id="text3" class="inner-container">
<h2>Text 3</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi, maxime repellat aperiam labore exercitationem enim possimus. Suscipit facilis debitis quidem excepturi?
</div>
<div id="text4" class="inner-container">
<h2>Text 4</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text5" class="inner-container">
<h2>Text 5</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text6" class="inner-container">
<h2>Text 6</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text7" class="inner-container">
<h2>Text 7</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text8" class="inner-container">
<h2>Text 8</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
<div id="text9" class="inner-container">
<h2>Text 9</h2>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eveniet provident recusandae, omnis laborum ad, pariatur debitis hic velit magni, expedita dicta vel nemo asperiores aperiam quia soluta esse consequuntur! Praesentium voluptate delectus, consequatur
dolore veniam vitae sint error ea, facere nisi reprehenderit harum doloremque asperiores repudiandae eligendi.
</div>
</div>
</div>
<div class="col-4" id="aside-content">
<div class="aside-content">
<h3>Table of Contents</h3>
<div>
Text 1
Text 2
Text 3
Text 4
Text 5
Text 6
Text 7
Text 8
Text 9
</div>
</div>
</div>
</section>
<footer>
<h3>footer</h3>
</footer>
When I resize the window for mobile view (below 550px width), I want the columns to stretch width according to the window size. Instead, the blue column is slightly smaller than the viewport width and yellow, red and green columns shrink way too much.
this is the result i'm getting:
https://imgur.com/Hl60iiy
this is the result i want:
https://imgur.com/cksNN7B
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
p{
font-size: 10px;
}
.inBody{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: row-reverse;
}
.forAll{
height: inherit;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
white-space: nowrap;
display: flex;
align-items:center;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 20px;
width: 200px;
line-height: 5px;
}
.content{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.opened{
display: none;
}
.close{
display: none;
}
#media (max-width: 550px){
.inBody{
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll{
height: 100vh;
width: 100%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="no-gutters">
<div class="fluid-container inBody">
<div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary">
<h2 class="verticalOption opened" id="menuHome">Sample</h2>
<div class="container content allContent" id="homeContent">
<h1>HOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col-1 col2 forAll bg-warning">
<h2 class="verticalOption" id="menuAbout">Sample</h2>
<div class="container content close allContent" id="aboutContent">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col-1 col3 forAll bg-danger">
<h2 class="verticalOption" id="menuContact">Contact Me</h2>
<div class="container content allContent close" id="contactContent">
<h1>Sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm1 col-1 col4 forAll bg-success">
<h2 class="verticalOption" id="menuPortfolio">Sample</h2>
<div class="container content allContent close" id="portfolioContent">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
Remove col-1 class, according to Bootstrap 4+ col-* is used to set the width in small devices source
body{
margin:0;
padding: 0;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}
p{
font-size: 10px;
}
.inBody{
height: 100vh;
width: 100vw;
display: flex;
flex-direction: row-reverse;
}
.forAll{
height: inherit;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
padding: 0;
}
.verticalOption{
transform: rotate(270deg);
white-space: nowrap;
display: flex;
align-items:center;
}
.verticalOption a{
text-decoration: none;
color: white;
font-size: 20px;
width: 200px;
line-height: 5px;
}
.content{
display: flex;
align-items: center;
justify-content: center;
text-align: center;
flex-direction: column;
}
.opened{
display: none;
}
.close{
display: none;
}
#media (max-width: 550px){
.inBody{
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll{
height: 100vh;
width: 100%;
}
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
</head>
<body>
<div class="no-gutters">
<div class="fluid-container inBody">
<div class="container col-xl-9 col-sm-9 col-9 col1 forAll bg-primary">
<h2 class="verticalOption opened" id="menuHome">Sample</h2>
<div class="container content allContent" id="homeContent">
<h1>HOME</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col2 forAll bg-warning">
<h2 class="verticalOption" id="menuAbout">Sample</h2>
<div class="container content close allContent" id="aboutContent">
<h1>About</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm-1 col3 forAll bg-danger">
<h2 class="verticalOption" id="menuContact">Contact Me</h2>
<div class="container content allContent close" id="contactContent">
<h1>Sample</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
<div class="container col-xl-1 col-sm1 col4 forAll bg-success">
<h2 class="verticalOption" id="menuPortfolio">Sample</h2>
<div class="container content allContent close" id="portfolioContent">
<h1>Portfolio</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ab accusantium aliquid animi asperiores
consequuntur debitis delectus dignissimos dolorum esse est facilis fuga ipsum maxime minus molestiae
mollitia neque odio perferendis, placeat quasi quia quo repellendus sunt suscipit ullam veniam
voluptatem voluptatum. Atque blanditiis deserunt, dignissimos dolorum eos expedita id illo iusto maiores
pariatur perferendis quam quo repudiandae temporibus totam. A ab accusamus accusantium atque
consequuntur deserunt dignissimos dolor eos ex excepturi expedita impedit inventore, laborum magni
maiores minus nam, nisi numquam odio officia officiis optio perferendis qui quidem quis rem, sunt
temporibus tenetur vitae voluptate? Nesciunt nulla possimus sapiente voluptatum!</p>
</div>
</div>
</div>
</div>
</body>
<script src="main.js"></script>
</html>
This seems to be caused by the col-1 which is means the default size of the columns is 1/12. You can solve the size by changing col-1 to col for 12/12 (100%) width as default (smallest breakpoint) to achieve the desired width. You might have to set an height though.
Codepen: https://codepen.io/jesprj/pen/xeGgpG
Try to addcol-xs-12 bootstrap class to each container and remove col-1
<div class="container col-xl-1 col-sm-1 col-xs-12 col2 forAll bg-warning">
Herre the js-fiddle : https://jsfiddle.net/bodybow/odtL97n1/1/
Just change width:100% to max-width:100% for .forAll class in media query
#media (max-width: 550px) {
.inBody {
height: 100vh;
width: 100%;
flex-direction: column-reverse;
}
.verticalOption {
transform: rotate(0);
}
.forAll {
height: 100vh;
max-width: 100%;
}
}
I am working on a Javascript accordion component, which is functioning well. The issue I am having is when I have more than one on a page, only the first is working. How can I adjust my Javascript (no jQuery) to allow for this? This is the first of many components (tabs etc.) so a general explanation of where I am going wrong would be great. The elements will be added by a CMS so I can't really use IDs in this case.
This is a pen:
https://codepen.io/mikehdesign/pen/KmeZgG
HTML
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis. Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem, animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
SCSS
div.accordion {
.accordion-header {
cursor: pointer;
&.active {
}
}
.accordion-content {
max-height: 0px;
overflow: hidden;
transition: max-height 400ms;
&.active {
overflow: auto;
}
}
}
Javascript
document.addEventListener('DOMContentLoaded', function() {
function toggle() {
if (this.nextElementSibling.classList.contains('active')) {
this.nextElementSibling.removeAttribute('style');
} else {
var elementHeight = this.nextElementSibling.scrollHeight;
this.nextElementSibling.style.maxHeight = elementHeight + 'px';
}
// Toggle `active` class
this.nextElementSibling.classList.toggle('active');
this.classList.toggle('active');
}
var accordion = document.querySelector('div.accordion');
var header = accordion.getElementsByClassName('accordion-header');
for (var i = 0, len = header.length; i < len; i++) {
header[i].addEventListener('click', toggle);
}
});
Try with document.querySelectorAll('div.accordion .accordion-header'); Mention all the selector inside the querySelectorAll .No need to add extra with className for .accordion-header
Updated Codepen
document.addEventListener('DOMContentLoaded', function() {
function toggle() {
if (this.nextElementSibling.classList.contains('active')) {
this.nextElementSibling.removeAttribute('style');
} else {
var elementHeight = this.nextElementSibling.scrollHeight;
this.nextElementSibling.style.maxHeight = elementHeight + 'px';
}
// Toggle `active` class
this.nextElementSibling.classList.toggle('active');
this.classList.toggle('active');
}
var accordion = document.querySelectorAll('div.accordion .accordion-header');
for (var i = 0, len = accordion.length; i < len; i++) {
accordion[i].addEventListener('click', toggle);
}
});
div.accordion .accordion-header {
cursor: pointer;
}
div.accordion .accordion-content {
max-height: 0px;
overflow: hidden;
-webkit-transition: max-height 400ms;
transition: max-height 400ms;
}
div.accordion .accordion-content.active {
overflow: auto;
}
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis.
Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem,
animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum
magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>
<div class="accordion">
<h4 class="accordion-header">Accordion 1</h4>
<div class="accordion-content">
<p>Cras malesuada ultrices augue molestie risus.</p>
</div>
<h4 class="accordion-header">Accordion 2</h4>
<div class="accordion-content">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Recusandae at placeat nesciunt nostrum accusamus debitis fuga similique quisquam, rerum temporibus, quod asperiores nulla, eveniet libero earum eaque harum inventore minima ipsum saepe omnis.
Officia, est, maiores. Reprehenderit odio perspiciatis voluptates commodi ex at praesentium laborum deleniti libero, architecto sit optio repellat est molestiae beatae, magnam qui voluptatibus. Ducimus mollitia dignissimos minus sapiente quidem,
animi adipisci laboriosam aliquam asperiores facere. Repellat recusandae doloribus incidunt voluptatibus quibusdam rem delectus inventore nisi, laudantium. Doloribus eum vero, consequuntur nisi enim quam non odio dignissimos praesentium nostrum
magnam consequatur totam reprehenderit quaerat. Saepe, blanditiis fugit?</p>
</div>
<h4 class="accordion-header">Accordion 3</h4>
<div class="accordion-content">
<p>Vivamus facilisisnibh scelerisque laoreet.</p>
</div>
</div>