I have the following vanilla Javacscript accordion working well. I am now trying to adapt my toggle function so that the sections other than the one selected in the accordion collapse. This is what I have so far - you will see that the sections remain open unless they are clicked to be closed:
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>
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.querySelectorAll('div.accordion .accordion-header');
for (var i = 0, len = accordion.length; i < len; i++) {
accordion[i].addEventListener('click', toggle);
}
});
SCSS
div.accordion {
.accordion-header {
cursor: pointer;
&.active {
}
}
.accordion-content {
max-height: 0px;
overflow: hidden;
transition: max-height 400ms;
&.active {
overflow: auto;
}
}
}
Any help with this would be greatly appreciated - I am not using jQuery for this project.
We can collapse all sections firstly before open the clicked one.
just add this loop at the first of toggle function:
var x = document.getElementsByClassName('active');
var i;
for (i = 0; i < x.length; i++) {
if( x[i]==this ){ break; }
x[i].nextElementSibling.removeAttribute('style');
x[i].nextElementSibling.classList.toggle('active');
x[i].classList.toggle('active');
}
Updated CodePEN
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>
<script>
document.addEventListener('DOMContentLoaded', function() {
function toggle() {
var x = document.getElementsByClassName('active');
var i;
for (i = 0; i < x.length; i++) {
if( x[i]==this ){ break; }
x[i].nextElementSibling.removeAttribute('style');
x[i].nextElementSibling.classList.toggle('active');
x[i].classList.toggle('active');
}
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);
}
});
</script>
Related
Solution:
Thanks to #Kalimah, this works in composition api & script setup:
<script setup>
const state = reactive({
meetCardHeight: 100
})
const element = ref(null)
const changeElementHeight = () => {
if (state.meetCardHeight !== element.value.scrollHeight) {
state.meetCardHeight = element.value.scrollHeight
} else {
state.meetCardHeight = 100
}
}
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}" #click="changeElementHeight">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
It will expand the div to its height-auto size with a smooth transition.
Original Question:
I'm trying to compute the true height of all text in this component, despite part of it being hidden by overflow: hidden (tailwind):
<script setup>
const state = reactive({
meetCardHeight: 100
})
</script>
<template>
<div ref="element" class="w-6/12 p-4 mx-auto rounded border border-slate-400 bg-slate-50 shadow cursor-pointer hover:border-slate-600 hover:shadow-md transition mb-4 overflow-hidden transition-all duration-500" :style="{ height: state.meetCardHeight + 'px'}">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</div>
</template>
The current component height is set to 100px for the overflow property to take effect. Is there a way to determine the height that h1 and p tags would result in, if overflow would not be present?
You can find the height with scrollHieght property. It is a native JS property and is independet of vue or any other libraries.
Example:
console.log("Full Height", document.querySelector(".container").scrollHeight + "px");
.container{
height: 100px;
overflow: hidden;
}
<div class="container">
<h1>Hello World</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Adipisci architecto at atque beatae commodi cumque delectus dolor doloremque enim est et eum ex facere id illum incidunt, ipsum iusto labore laboriosam libero magnam minima molestias nobis nulla officia perspiciatis placeat porro possimus quo sequi tempore tenetur velit voluptatibus? Adipisci amet asperiores, autem explicabo fuga fugiat, id illum nobis obcaecati quam quasi, quibusdam tempora voluptatem? Adipisci aliquam at dignissimos dolore doloribus eaque itaque minus nam possimus quae quia temporibus vel, vero!</p>
</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>
I'm having trouble with 'Collapse' and 'Expand All' functionality:
The 'Expand All' button isn't working. How do I fix this code?
When I do Collapse each item individually the red and purple boxes (around them) do not expand accordingly (if the text exceeds the pre-set height). The Collapse items also spill over and go all the way down the page and over the footer. How do I get the red and purple box to expand with the text IF the max length of the text goes further down past the end of their height?
//Expand All
function toggleAll() {
var buttons = Array.prototype.slice.call(document.querySelectorAll('.testingpol_extrainfo_column'));
buttons.forEach(function(button) {
//Swap each element between display 'none' and 'block'
if (window.toggleAll === 0) {
button.style.display = 'block';
} else {
button.style.display = 'none';
}
// Swap window.toggleAll between 0 and 1
window.toggleAll = window.toggleAll === 0 ? 1 : 0;
});
}
// Collapse Individual points
var coll = document.getElementsByClassName("testingpol_extrainfo_column");
var i;
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** TESTING POLICY Information **/
.testingpol_extrainfo_outerbackground {
background-color: rgb(51, 20, 223);
height: 900px;
width: auto;
margin: 25px 0px 100px 0px;
padding: 20px 0px 0px 0px;
}
.testingpol-extrainfo-heading {
font-size: 42px;
text-align: center;
color: rgb(0, 0, 0);
padding: 0px;
margin: 50px 0px 0px 0px;
}
.testingpol_extrainfo_banner {
background-color: red;
height: 800px;
width: 1000px;
margin: 10px 0px 100px 250px;
border-radius: 3px;
}
.testingpol_extrainfo_column {
background-color: rgb(119, 119, 119);
color: white;
cursor: pointer;
padding: 18px;
margin: 0px 0px 0px 50px;
width: 900px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.testingpol_extrainfo_column:hover {
background-color: #555
}
.testingpol_extrainfo_content {
margin: 0px 0px 0px 50px;
padding: 0 18px;
width: 900px;
height: auto;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
/**** FOOTER ****/
.form-control-bottomstuff {
background-color: teal;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
}
.footer_bar {
background-color: black;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<section class="main_body">
<div class="testingpol_extrainfo_outerbackground">
<div class="testingpol_extrainfo_banner">
<div class="testingpol-extrainfo-heading ">Collapse Title</div>
<input type="button" value="Expand All" onclick="toggleAll();">
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
non?</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
<h6>Lorem</h6> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
vero harum facere.</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
</p><br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
</p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer_bar ">
<div>
Footer 2
</div>
</div>
</footer>
</body>
<script src="script.js"></script>
</html>
I rewrote all of your JS and added min-height and flexbox properties to your banner and outerbackground as flexbox will flex with the content. I reworked the JS with a .show class and toggled that class. Hope this is what you are looking for.
//Expand All
const expandAll = document.getElementById('expandAll');
expandAll.addEventListener('click', () => {
// const buttons = document.querySelectorAll('.testingpol_extrainfo_column');
const content = document.querySelectorAll(".testingpol_extrainfo_content");
for (let i=0; i < content.length; i++) {
content[i].classList.remove('show-individual');
content[i].classList.toggle('show');
}
});
// Collapse Individual points
const banner = document.querySelector('.testingpol_extrainfo_banner');
banner.addEventListener('click', (e) =>{
const col = document.querySelectorAll(".testingpol_extrainfo_column");
const content = document.querySelectorAll(".testingpol_extrainfo_content");
for (let i=0; i < col.length; i++){
if (e.target === col[i]){
content[i].classList.toggle('show-individual');
}
}
});
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/** TESTING POLICY Information **/
.testingpol_extrainfo_outerbackground {
background-color: rgb(51, 20, 223);
min-height: 900px;
width: auto;
margin: 25px 0px 100px 0px;
padding: 20px 0px 0px 0px;
}
.testingpol-extrainfo-heading {
font-size: 42px;
text-align: center;
color: rgb(0, 0, 0);
padding: 0px;
margin: 50px 0px 0px 0px;
}
.testingpol_extrainfo_banner {
background-color: red;
min-height: 800px;
display: flex;
flex-direction: column;
/* align-items: flex-start; */
width: 1000px;
margin: 10px 0px 100px 250px;
border-radius: 3px;
}
input[id="expandAll"]{
align-self: flex-start;
}
.testingpol_extrainfo_column {
background-color: rgb(119, 119, 119);
color: white;
cursor: pointer;
padding: 18px;
margin: 0px 0px 0px 50px;
width: 900px;
border: none;
text-align: left;
outline: none;
font-size: 15px;
}
.active,
.testingpol_extrainfo_column:hover {
background-color: #555
}
.testingpol_extrainfo_content {
margin: 0px 0px 0px 50px;
padding: 0 18px;
width: 900px;
height: auto;
display: none;
overflow: hidden;
background-color: #f1f1f1;
}
.show {
display: block;
}
.show-individual {
display: block; }
/**** FOOTER ****/
.form-control-bottomstuff {
background-color: teal;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
}
.footer_bar {
background-color: black;
height: 400px;
width: auto;
text-align: center;
font-size: 50px;
padding-top: 150px;
color: white;
}
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
<title>TEST</title>
</head>
<body>
<section class="main_body">
<div class="testingpol_extrainfo_outerbackground">
<div class="testingpol_extrainfo_banner">
<div class="testingpol-extrainfo-heading ">Collapse Title</div>
<input id="expandAll" type="button" value="Expand All" >
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Iste doloribus porro rem corrupti ex sed at provident neque, est eius iure, adipisci sequi possimus velit maiores voluptates laudantium eum odio.
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Est commodi sunt veritatis similique error modi corporis? Nisi est omnis, praesentium eveniet numquam unde sunt, neque, quod consectetur ipsa ducimus beatae.
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Esse similique veniam iure, illum officiis quidem cupiditate veritatis? Possimus aliquid, fuga ea rerum dolores, provident, ad vitae commodi veritatis et numquam. Facere
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Consectetur ab dolor natus quod enim perspiciatis, at hic voluptatem omnis autem deleniti sapiente. Accusantium quo provident libero sunt perspiciatis nostrum rerum.
</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minima aut est porro maxime sint perferendis praesentium et maiores, cum ducimus numquam exercitationem aperiam animi ex, deleniti eveniet accusantium mollitia vero. distinctio nam
non?</p><br>
<h6>Lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni rem culpa aperiam deleniti. Voluptatum odio ducimus reprehenderit, nobis temporibus saepe a est, quasi non ipsa tempore eveniet perspiciatis explicabo neque. </p><br>
<h6>Lorem</h6> <br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Aspernatur officiis necessitatibus, iure adipisci in esse, ex praesentium dolores autem rerum hic ab minus, rem animi numquam cupiditate maiores et corrupti! Quaerat distinctio inventore
veritatis nemo dolore saepe? Modi, repellendus voluptas. Sint voluptas deleniti atque vero modi eum, architecto praesentium quidem maiores delectus distinctio sed error ex repudiandae quis, eius similique! nemo?
</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Ut quisquam doloremque cum beatae corrupti in suscipit repellat ducimus reprehenderit tempore autem officia, pariatur dolore debitis temporibus perferendis esse labore mollitia eaque
vero harum facere.</p><br>
<h6>lorem</h6><br>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Minus dolore animi debitis quisquam neque eveniet aspernatur quod commodi vel, dignissimos laborum obcaecati ut laudantium, eaque, impedit nesciunt deleniti atque iure. Iusto, quia
hic quis vel similique qui possimus sit exercitationem. Eius labore dignissimos optio incidunt adipisci doloribus vero, debitis soluta aliquid illo non facilis? Qui corrupti quis iusto voluptate similique! </p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ipsam recusandae distinctio reiciendis, voluptas suscipit veniam minus error eveniet nisi, incidunt quasi animi provident voluptates, sunt voluptatem laborum dignissimos mollitia! Alias!
</p><br>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ad vel illum veritatis aperiam labore modi culpa, ab officiis laudantium dicta. Reiciendis consectetur mollitia quasi, saepe error eum nemo tempora perferendis.</p><br>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Tempora dignissimos sunt eos quae saepe rerum ipsam magni nulla repellat? Blanditiis saepe veritatis provident molestias facilis doloribus eveniet adipisci a explicabo.</a>.</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Corrupti facere rerum, fuga sapiente eveniet tenetur, consectetur repellendus labore aperiam fugit iste voluptate eligendi reprehenderit molestiae ducimus magnam vitae quasi aut!
</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Reprehenderit in voluptates tempora aliquam aspernatur. Voluptate laboriosam culpa id porro placeat. Ea tempore doloribus quibusdam quasi itaque ducimus nulla iste architecto. Ipsa neque
sint ut alias et necessitatibus odio quisquam maiores placeat sed nam debitis dolore porro, quos dolorem nulla optio magnam laborum, eaque nemo vel. Nobis quas dicta sit perferendis.</p>
<h6>Lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Perferendis magnam dolores non debitis laboriosam voluptas aliquam eius mollitia ullam, impedit, tenetur facilis quo possimus odit quos ex illum distinctio eveniet. Eveniet numquam ducimus,
recusandae, voluptas expedita corrupti reprehenderit amet? Ut, ea.</p>
<h6>lorem</h6>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Earum illo architecto facere? Obcaecati, quasi eveniet repudiandae eligendi asperiores odio quibusdam? Ducimus cum itaque, eius delectus officia tempora nulla assumenda dolorem?
</p>
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum, dolor sit amet consectetur adipisicing elit. Ab commodi hic distinctio officia. Veniam eum eos repudiandae cumque molestiae. Aliquam iusto repellendus vitae molestiae facere quaerat placeat sint totam illo! Excepturi rem eligendi commodi
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Rerum nostrum fugit dolorum quis possimus optio doloribus adipisci eos quaerat praesentium debitis voluptatum voluptatem, quo quia autem officiis commodi nam dignissimos! Voluptas maxime temporibus
quis est, fugit eaque suscipit pariatur inventore nisi perspiciatis voluptatum cumque labore adipisci. Dicta, pariatur porro inventore illum cum similique consequatur deleniti mollitia atque consequuntur numquam quam!
</p>
</div>
<button type="button" class="testingpol_extrainfo_column">Lorem</button>
<div class="testingpol_extrainfo_content">
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Consequatur quibusdam officia expedita voluptatem. Sint modi saepe quaerat sequi laborum numquam esse earum, similique hic libero velit fugiat reiciendis et natus?
</p>
</div>
</div>
</div>
</section>
<!-- FOOTER -->
<footer>
<div class="footer_bar ">
<div>
Footer 2
</div>
</div>
</footer>
</body>
<script src="script.js"></script>
I was searching for a toggle collapse button and I've been leaded to this link:
https://getbootstrap.com/docs/4.0/components/collapse/
I've found what I was looking for, but the only problem is the transition; once I click on the button it shows my div immediately . I want it to expand slower with transition.
Here's my code:
.innerdiv{
display: block;
width: 33%;
padding: 50px;
margin-left: 2px;
text-align: center;
background-color: #2bb88d;
margin-top: 20px;
border-radius: 20px;
height: 350px;
overflow:auto ;
float: left;
clear: right;
transition: 15s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="styletest.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
<div class="collapse" id="collapseExample">
<div class="innerdiv"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p></div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum, officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum, officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
</div>
</body>
</html>
At the time of collapsing, there runs a default bootstrap class named collapsing. You've to override that class like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx" crossorigin="anonymous"></script>
</head>
<style>
.innerdiv {
display: block;
width: 33%;
padding: 50px;
margin-left: 2px;
text-align: center;
background-color: #2bb88d;
margin-top: 20px;
border-radius: 20px;
height: 350px;
overflow: auto;
float: left;
clear: right;
}
.collapsing {
transition: 15s;
}
</style>
<body>
<button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"> more adresses </button>
<div class="collapse" id="collapseExample">
<div class="innerdiv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis est soluta aliquam necessitatibus quia tempora corrupti hic fuga! Perspiciatis iste vero ipsum maxime, saepe vitae dolores amet iure assumenda cum.</p>
</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
<div class="innerdiv">Lorem ipsum dolor sit amet consectetur adipisicing elit. Suscipit explicabo, expedita voluptate nemo commodi architecto qui libero aliquam nisi corrupti quam, dignissimos odit hic neque aperiam, repudiandae ex soluta. Iste assumenda nostrum culpa
architecto fugit id laborum quidem expedita perferendis aliquam placeat distinctio, ad magni ipsam tenetur est nesciunt non pariatur esse veritatis dolores dolorem unde quos ducimus? Beatae quam, corporis hic autem quisquam quae magni totam
vitae labore sapiente error ab quo animi consequuntur veniam tempore facere. Facilis, minima quo neque a quas numquam magni, laborum dignissimos accusamus ipsa facere fuga. Quam voluptate sit quas illo sequi, sed nam vero repellendus, ipsum,
officia quibusdam quos consectetur voluptas dignissimos obcaecati ad non natus hic recusandae quae numquam ex. Aspernatur esse unde, expedita nisi amet laborum blanditiis accusamus corrupti ea vel! Exercitationem vel, quidem in sed dolorem
ullam odit sit nisi earum nesciunt unde eaque cum labore, quam id quibusdam ab.</div>
</div>
</body>
</html>
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>