Hello I have this siple accordion, and I have an issue, that whenever i copy text from accordion, click event listener triggers and closes the accordion.
I would like to make it work without using jQuery
How could I fix it?
and how would I make it , so when i click somewhere else than on .question / .answer it would close automaticaly? i tried adding event listener to window, but after a long time of not figuring out how to makeit work I gave up.
here is my codepen : https://codepen.io/drabfi/pen/LYrBxzWhttps://codepen.io/drabfi/pen/LYrBxzW
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container active">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
const accordion = document.querySelectorAll(".content-container");
for(let i=0;i<accordion.length;i++){
accordion[i].addEventListener("click", function (){
if(this.classList.contains("active")){
accordion.forEach((panel)=>panel.classList.remove("active"));
}else{
accordion.forEach((panel)=>panel.classList.remove("active"));
this.classList.add("active");
}
})
}
.accordion{
margin: 0 auto;
width: 60%;
border-color: #fff;
padding: 2rem;
border-radius: 30px;
&-title{
margin-bottom: 2rem;
text-align: center;
}
.content-container
.question{
padding: 1rem 0;
font-size: 22px;
cursor: pointer;
border-bottom: 1px solid #000;
position: relative;
&::after{
content: "+";
position: absolute;
right: -5px;
}
}
.answer{
padding-top: 1rem;
font-size: 22px;
line-height: 1.5;
width: 100%;
height: 0px;
overflow: hidden;
transition: all .5s;
}
}
// js styling link
.accordion .content-container.active{
.question{
&::after{
content: "-";
font-size: 2rem;
transition: .5s;
}
}
.answer{
height: 150px;
}
}
I would be very happy to see the solutions so I could move on from this spot. Thank you for any advices.
you need to learn a bit about event delegation...
const
accordion = document.querySelector('.accordion')
, accordionEl = accordion.querySelectorAll('.content-container')
;
accordion.onclick = ({target: elmAcc}) =>
{
if (!elmAcc.matches('.content-container > div.question')) return // select only this div
let elContainer = elmAcc.closest('.content-container')
if (elContainer.classList.toggle('active'))
accordionEl.forEach( panel => panel.classList.toggle('active', panel===elContainer))
}
// clicking outside will close accordion :
document.addEventListener('click', event =>
{
if (!accordion.contains(event.target))
accordionEl.forEach( panel => panel.classList.remove('active'))
});
.accordion {
margin : 0 auto;
width : 60%;
border-color : #fff;
padding : 2rem;
border-radius : 30px;
}
.accordion-title {
margin-bottom : 2rem;
text-align : center;
}
.accordion .content-container .question {
padding : 1rem 0;
font-size : 22px;
cursor : pointer;
border-bottom : 1px solid #000;
position : relative;
}
.accordion .content-container .question::after {
content : "+";
position : absolute;
right : -5px;
}
.accordion .answer {
padding-top : 1rem;
font-size : 22px;
line-height : 1.5;
width : 100%;
height : 0px;
overflow : hidden;
transition : all 0.5s;
}
.accordion .content-container.active .question::after {
content : "-";
font-size : 2rem;
transition : 0.5s;
}
.accordion .content-container.active .answer {
height : 150px;
}
<div class="accordion">
<h2 class="accordion-title">Frequently asked questions</h2>
<div class="content-container">
<div class="question">What is the return Policy</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Where can you find us</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
<div class="content-container">
<div class="question">Some other text</div>
<div class="answer">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Incidunt dolores non eaque beatae dolor veniam amet, molestiae neque quibusdam ipsa!</div>
</div>
</div>
Related
I was creating a project in which i needed to show heading for a topic and when the mouse goes over it, it changes to information of that heading. I have managed to make it work however i don't want it to change instantly, i want to apply transition on it so it makes it more pleasing. The problem is i don't know which element to put it on. I tried to put it on all three but it didn't work. I would appreciate if someone helped me with it. Here's my code:
HTML
<div class="sop-container">
<div class="sop-body" onmouseover="showSop()" onmouseout="hideSop()">
<h1 id="sop-head">Lorem Ipsum</h1>
<p class="sop-p" id="sop-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, tempore laudantium maiores eligendi tempora ab repellat nam possimus sit molestiae cumque officiis corporis optio officia commodi consequatur aperiam quaerat odit.</p>
</div>
<div class="sop-img">
<img src="masks.jpg" alt="">
</div>
</div>
CSS
.sop-body{
flex: 1;
background-color: #EAC435;
transition: 3s ease;
}
.sop-body h1{
text-align: center;
margin-top:125px;
transition: 3s ease-in-out;
}
.sop-body p{
display: none;
margin:5%;
letter-spacing: 1px;
font-size: large;
margin-top: 80px ;
transition: 3s ease-in-out;
}
.sop-img{
flex: 1;
overflow-y: hidden;
}
Javascript (just in case)
var sopBody = document.getElementById("sop-p");
var sopHead = document.getElementById("sop-head")
function showSop(){
sopBody.style.display = "block"
sopHead.style.display = "none"
}
function hideSop(){
sopBody.style.display = "none"
sopHead.style.display = "block"
}
transition doesn't work on the display property. Just think for a moment about how could you render a partial display element. You can't.
Alternatively, you can use opacity here
var sopBody = document.getElementById("sop-p");
var sopHead = document.getElementById("sop-head")
function showSop() {
sopBody.style.opacity = "1"
sopHead.style.opacity = "0"
}
function hideSop() {
sopBody.style.opacity = "0"
sopHead.style.opacity = "1"
}
.sop-body {
flex: 1;
background-color: #EAC435;
}
.sop-body h1 {
text-align: center;
margin-top: 125px;
transition: 1s ease-in-out;
}
.sop-body p {
opacity: 0;
margin: 5%;
letter-spacing: 1px;
font-size: large;
margin-top: 80px;
transition: 1s ease-in-out;
}
.sop-img {
flex: 1;
overflow-y: hidden;
}
<div class="sop-container">
<div class="sop-body" onmouseover="showSop()" onmouseout="hideSop()">
<h1 id="sop-head">Lorem Ipsum</h1>
<p class="sop-p" id="sop-p">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, tempore laudantium maiores eligendi tempora ab repellat nam possimus sit molestiae cumque officiis corporis optio officia commodi consequatur aperiam quaerat odit.</p>
</div>
<div class="sop-img">
<img src="masks.jpg" alt="">
</div>
</div>
I have a design in front of me that looks like this,
As you can see there is a blue square (this right half will be hidden off screen) that overlaps three disticnt sections of a webpage, and I have not how to tackle it.
The only 2 options I can are,
1) Add a portion of the purple square to each of the 3 sections to it merges together, however each section has flexible content so the changes of lining up are slim.
2) Add an absolutely positioned div and position it where i need with the square as a background image and then play with z-indexing?
Is there a simple solution that I am missing?
You can try something like this
.parent {
display: flex;
flex-direction: column
}
.card {
disaply: flex;
background: darkblue;
height: 200px;
width: 350px;
}
.card2 {
disaply: flex;
background: skyblue;
height: 200px;
width: 350px;
}
* {
margin: 0;
padding: 10px;
}
.diamond {
height: 150px;
width: 150px;
background-color: purple;
transform: rotate(45deg);
z-index: 1000;
margin-left:274px;
top: 0;
background: linear-gradient(to left bottom, #ff66ff 50%, #ffe6ff 50%);
}
<div class="parent">
<div class="card">
<h1>Item1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>
<div class="diamond"></div>
</div>
<div class="card2">
<h1>Item1</h1>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Vero suscipit quisquam, dolor laboriosam fugiat explicabo ipsam dolores.</p>
</div>
</div>
https://codepen.io/tonytomk/pen/ExPNWjz
Goal: Attempting to incorporate an expanding image grid into my site, with 3 columns and 4 rows. I am working with an area of 810w x 1050h.
Issues: I can't seem to get the 3 x 4 grid to render correctly. You can see what I mean by this here: http://rthhockey.com/coaching2 I've played minimum/maximum heights to no avail.
Things I have tried: I have distributed each link by 33.3333....% Nothing seems to be working. I've been playing with the code for about 3 days now and I don't want to make things worse. I'm sure one of you guys can catch what I'm missing fairly quickly.
This is the CodePen where I found this grid: https://codepen.io/DanBoulet/pen/YXQBbZ
Any and all assistance would be greatly appreciated. Thanks for your time.
CSS
body {
background-color: #fff;
color: #ffffff;
font-family: open sans;
font-size: 100%;
font-weight: 400;
line-height: 1.5;
margin: 0 auto;
max-width: 100%;
height: 1050px;
max-height: 1050px;
overflow-y: scroll;
padding: 5px;
}
.expanding-grid {
position: relative;
width: 100%;
max-width: 100%;
}
.expanding-grid .links {
display: block;
margin: 0 -1em;
overflow: hidden;
padding: 5px;
}
.expanding-grid .links > li {
box-sizing: border-box;
float: left;
padding: 1em;
}
.expanding-grid .links > li a {
background: #ff2200;
color: #fff;
display: block;
font-size: 24px;
line-height: 1;
padding: 25% 1em;
position: relative;
width: 250px;
height: 150px;
text-align: center;
text-decoration: none;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.expanding-grid .links > li a:hover {
background: #ffb733;
}
.expanding-grid .links > li a.active {
background: #cc8400;
}
.expanding-grid .links > li a.active:after {
background-color: transparent;
border-bottom: 0.375em solid #888;
border-left: 0.375em solid transparent;
border-right: 0.375em solid transparent;
bottom: -0.5em;
content: '';
height: 0;
left: 50%;
margin-left: -0.375em;
position: absolute;
width: 0;
}
#media only screen and (max-width: 810px) {
.expanding-grid .links > li {
width: 50%;
}
.expanding-grid .links > li:nth-of-type(2n+1) {
clear: left;
}
}
#media only screen and (min-width: 40em) and (max-width: 810px) {
.expanding-grid .links > li {
width: 33.3333333333%;
}
.expanding-grid .links > li:nth-of-type(3n+1) {
clear: left;
}
}
#media only screen and (min-width: 810px) {
.expanding-grid .links > li {
width: 33.3333333333%;
}
.expanding-grid .links > li:nth-of-type(4n+1) {
clear: left;
}
}
.expanding-grid .spacer {
background-color: #ff2200;
clear: both;
display: block;
margin: 0 1em;
}
.expanding-grid .expanding-container {
clear: both;
display: none;
overflow: hidden;
width: 100%;
}
.expanding-grid .expanding-container.expanded, .expanding-grid .expanding-container:target {
display: block;
}
.expanding-grid .hentry {
background: #494949;
box-sizing: border-box;
clear: both;
color: #fff;
min-height: 4em;
overflow: hidden;
padding: 1em;
width: 100%;
}
.expanding-grid .hentry .entry-image {
box-sizing: border-box;
float: right;
margin-left: 1em;
padding: 0.25em 0 0.52em 1em;
text-align: center;
width: 50%;
}
.expanding-grid .hentry .entry-title {
font-size: 28px;
}
.expanding-grid .close-button {
background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj48cGF0aCBzdHJva2U9IiNmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLW1pdGVybGltaXQ9IjEwIiBkPSJNLjcuN2wxOCAxOG0tMTggMGwxOC0xOCIvPjwvc3ZnPg==) no-repeat scroll 50% 50% transparent;
color: #fff;
display: inline-block;
height: 20px;
line-height: 1;
overflow: hidden;
padding: 1.5em 2em;
text-decoration: none;
text-indent: 5em;
white-space: nowrap;
width: 20px;
will-change: opacity;
z-index: 5;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.expanding-grid .close-button.active {
transition: opacity 0.2s;
}
.expanding-grid .close-button:hover {
opacity: 0.5;
}
.img-placeholder {
background: #ffffff;
color: #fff;
font-size: 4em;
font-weight: 300;
line-height: 1;
width: 400px;
height: 350px;
padding: 5px;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
HTML
<div class="expanding-grid">
<ul class="links">
<li>Jackson 5</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
<div id="section1" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Jackson 5</h1>
<div class="entry-image"><div class="img-placeholder"><img src="https://i.imgur.com/Pa3wzWI.png?1"></div></div>
<p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck<br>- F3 Skates Inside/Out Pattern Around Face-Off Dot With Puck, Breaks On Goal For Shot<br>- F1 Picks Up Puck Below Far Circle, Matches Timing Of F2 Through Neutral Zone And Dishes Pass To F2<br>-F2 Breaks In On Goal For Shot While F1 Crashes Net For Rebound</p>
</article>
</div>
<div id="section2" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">2</div></div>
<p>- 3 Skaters Run This Drill At Once<br>- F1 Skates Top Of Circle And Takes Shot On Goal<br>- F2 Skates Full Circle Without Puck</p>
</article>
</div>
<div id="section3" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">3</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section4" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">4</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section5" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">5</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section6" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">6</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section7" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">7</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section8" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">8</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section9" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">9</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section10" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">10</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
<div id="section11" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">11</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum consequatur, culpa voluptate distinctio iure! Error saepe cumque molestiae deserunt nemo autem non amet, aliquam vitae nulla sit praesentium unde iusto.</p>
</article>
</div>
<div id="section12" class="expanding-container">
<article class="hentry">
<h1 class="entry-title">Title</h1>
<div class="entry-image"><div class="img-placeholder">12</div></div>
<p>Description. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati veniam aliquam eos eius blanditiis, facilis minus quod nostrum. Dolores recusandae doloremque quam consequatur consequuntur accusantium quos possimus inventore ratione reiciendis!</p>
</article>
</div>
</div>
Script
var getLastSiblingInRow = function (element) {
var candidate = element,
elementTop = element.offsetTop;
while (candidate.nextElementSibling !== null) {
if (candidate.nextElementSibling.offsetTop > elementTop) {
return candidate;
}
candidate = candidate.nextElementSibling;
}
return candidate;
};
var calculatePageScrollDistance = function (top, bottom) {
var windowScrollDistance = $(window).scrollTop(),
windowHeight = $(window).height(),
scrollDistanceToTop,
scrollDistanceToBottom;
if (windowScrollDistance >= top) {
return top - windowScrollDistance;
}
else if ((windowScrollDistance + windowHeight) >= bottom) {
return 0;
}
else {
scrollDistanceToTop = top - windowScrollDistance;
// Find the distance we need to scroll to reveal the entire section.
scrollDistanceToBottom = bottom - (windowScrollDistance + windowHeight);
return Math.min(scrollDistanceToTop, scrollDistanceToBottom);
}
};
var expandingGrid = function (context, options) {
var defaults = {
animationDuration: 250,
linksSelector: '.links a',
expandingAreaSelector: '.expanding-container',
closeButtonMarkup: 'Close',
spacerMarkup: '<span class="spacer" aria-hidden="true"/>',
elementActiveClass: 'active',
elementExpandedClass: 'expanded',
onExpandBefore: false,
onExpandAfter: false
};
var settings = $.extend({}, defaults, options);
var isExpanded = false;
var activeLink = false;
var activeExpandedArea = false;
var activeExpandedAreaTop = false;
var activeExpandedAreaHeight = false;
var lastItemInActiveRow = false;
var activeRowChanged = false;
var checkExpandedAreaResize = false;
var $links = $(settings.linksSelector, context);
var $expandingAreas = $(settings.expandingAreaSelector, context);
var $closeButton = $(settings.closeButtonMarkup);
var $spacer = $(settings.spacerMarkup);
var $secondarySpacer = $spacer.clone();
var scrollSectionIntoView = function (top, bottom, duration, callback) {
var animate;
var scroll = 0;
var distance = calculatePageScrollDistance(top, bottom);
var windowScrollDistance = $(window).scrollTop();
var timeLeft;
duration = (typeof duration === 'undefined') ? settings.animationDuration : duration;
timeLeft = duration;
var start = new Date().getTime();
var last = start;
var tick = function() {
timeLeft = Math.max(duration - (new Date() - start), 0);
var x = (timeLeft === 0 || distance === 0) ? 0 : ((new Date() - last) / timeLeft * distance);
var diff = (distance > 0 ? Math.min(x, distance) : Math.max(x, distance));
distance = distance - diff;
scroll += diff;
window.scrollTo(0, windowScrollDistance + scroll);
last = new Date().getTime();
if (last - start <= duration) {
animate = (window.requestAnimationFrame && requestAnimationFrame(tick)) || setTimeout(tick, 16);
}
else {
if (typeof callback === 'function') {
callback();
}
}
};
tick();
};
$links.each(function () {
var $this = $(this);
var targetId = $this.attr('href').match(/#([^\?]+)/)[1];
var target = document.getElementById(targetId);
if (target) {
$this.click(function (event) {
var clickedLink = this;
var scrollTargetOffset;
var closeButtonAnimationDelay;
event.preventDefault();
// Is this link already expanded?
if (isExpanded && activeLink === clickedLink) {
$closeButton.click();
}
else {
$links.removeClass(settings.elementActiveClass).filter($this).addClass(settings.elementActiveClass).parent('li').each(function () {
var lastSibling = getLastSiblingInRow(this);
activeRowChanged = lastSibling !== lastItemInActiveRow;
if (activeRowChanged) {
lastItemInActiveRow = lastSibling;
}
if (isExpanded && activeRowChanged) {
$secondarySpacer.height($spacer.height());
$spacer.height(0).replaceWith($secondarySpacer);
}
$(lastItemInActiveRow).after($spacer);
});
if (isExpanded && activeRowChanged) {
$secondarySpacer.animate({height: 0}, settings.animationDuration, function () {
$(this).detach();
});
$closeButton.removeClass(settings.elementActiveClass).hide();
}
scrollTargetOffset = ($secondarySpacer.position().top < $spacer.position().top ? $secondarySpacer.height() : 0);
activeExpandedAreaTop = ($spacer.position().top - scrollTargetOffset);
$expandingAreas.removeClass(settings.elementExpandedClass).hide().filter(target).each(function () {
var $this = $(this);
var autoHeight = $this.height();
var autoOuterHeight = $this.outerHeight();
var initialHeight = (isExpanded && activeExpandedAreaHeight && (activeRowChanged === false)) ? activeExpandedAreaHeight : 0;
stopExpandedAreaMonitor();
$spacer.animate({height: autoHeight + 'px'}, settings.animationDuration);
$this.css({
height: initialHeight + 'px',
position: 'absolute',
left: 0,
top: $spacer.position().top + 'px'
}).show(0, function () {
if (typeof settings.onExpandBefore === 'function') {
settings.onExpandBefore.call(this);
}
}).animate({
height: autoHeight + 'px',
top: activeExpandedAreaTop + 'px'
}, settings.animationDuration, function () {
$this.css({height: 'auto'}).addClass(settings.elementExpandedClass);
activeExpandedAreaHeight = $this.height();
checkExpandedAreaResize = setInterval(function () {
var activeExpandedAreaNewHeight = $this.height();
if (activeExpandedAreaNewHeight !== activeExpandedAreaHeight) {
activeExpandedAreaHeight = activeExpandedAreaNewHeight;
syncExpandedAreaWithSpacer();
}
}, 1000);
if (typeof settings.onExpandAfter === 'function') {
settings.onExpandAfter.call(this);
}
});
var scrollTargetTop = $(clickedLink).offset().top - scrollTargetOffset;
var scrollTargetBottom = $this.offset().top + autoOuterHeight + 20 - scrollTargetOffset;
scrollSectionIntoView(scrollTargetTop, scrollTargetBottom);
});
closeButtonAnimationDelay = (isExpanded && activeRowChanged && ($this.parent().index() > $(activeLink).parent().index())) ? settings.animationDuration : (settings.animationDuration / 4);
$closeButton.css({
position: 'absolute',
right: 0,
top: activeExpandedAreaTop + 'px'
}).delay(closeButtonAnimationDelay).fadeIn(settings.animationDuration, function () {
$(this).addClass(settings.elementActiveClass);
});
activeLink = this;
activeExpandedArea = target;
isExpanded = true;
}
});
}
});
$closeButton.appendTo(context).hide().click(function (event) {
var $activeLink = $(activeLink);
var activeLinkTopOffset = $activeLink.offset().top;
var activeLinkBottomOffset = activeLinkTopOffset + $activeLink.outerHeight();
event.preventDefault();
$links.removeClass(settings.elementActiveClass);
$expandingAreas.slideUp(settings.animationDuration).removeClass(settings.elementExpandedClass);
$closeButton.removeClass('active').hide();
$spacer.animate({height: 0}, settings.animationDuration, function () {
$spacer.detach();
});
scrollSectionIntoView(activeLinkTopOffset, activeLinkBottomOffset);
stopExpandedAreaMonitor();
isExpanded = false;
activeLink = false;
activeExpandedArea = false;
});
var stopExpandedAreaMonitor = function () {
if (checkExpandedAreaResize) {
clearInterval(checkExpandedAreaResize);
}
};
var syncExpandedAreaWithSpacer = function () {
if (activeExpandedArea && isExpanded) {
$spacer.height($(activeExpandedArea).height());
activeExpandedAreaTop = $spacer.position().top;
$closeButton.add(activeExpandedArea).css({top: activeExpandedAreaTop + 'px'});
}
};
var positionSpacer = function () {
var lastSibling;
if (activeLink && lastItemInActiveRow && isExpanded) {
$spacer.detach();
lastSibling = getLastSiblingInRow($(activeLink).parent()[0]);
if (lastItemInActiveRow !== lastSibling) {
console.log(lastSibling);
lastItemInActiveRow = lastSibling;
}
$(lastItemInActiveRow).after($spacer);
}
};
$(window).resize(function () {
if (isExpanded) {
positionSpacer();
syncExpandedAreaWithSpacer();
}
});
};
// Create the jQuery plugin.
$.fn.expandingGrid = function (options) {
return this.each(function () {
expandingGrid(this, options);
});
};
})(jQuery, window, document);
$(document).ready(function () {
$('.expanding-grid').expandingGrid();
});
This can be done very easily using CSS grid. W3 Schools has a great, easy to follow example that can be found here.
Here is a 3x4 responsive grid using using the linked code:
.grid-container {
max-width: 810px;
max-height: 1050px;
display: grid;
grid-template-columns: auto auto auto auto;
background-color: #2196F3;
padding: 10px;
}
.grid-item {
background-color: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(0, 0, 0, 0.8);
padding: 20px;
font-size: 30px;
text-align: center;
}
<div class="grid-container">
<div class="grid-item">1</div>
<div class="grid-item">2</div>
<div class="grid-item">3</div>
<div class="grid-item">4</div>
<div class="grid-item">5</div>
<div class="grid-item">6</div>
<div class="grid-item">7</div>
<div class="grid-item">8</div>
<div class="grid-item">9</div>
<div class="grid-item">10</div>
<div class="grid-item">11</div>
<div class="grid-item">12</div>
</div>
I've set the grid container to allow a max width of 810 px and a max height of 1050 px, as you specified in your post. Just add your content for each grid item inside the corresponding div tag, and you're set!
I have seen many questions but none are similar to my case. I have bootstrap collapse and show for a few div contents. The div content shows when title is clicked. I want to close all other div contents when I click another content's title.
The color of the title div is gray and should change to white when its content shows. Once the content is collapsed, title div color should back to gray.
Here's my code:
function collapse (e, id, collapasibleName) {
var toggleColor = document.getElementById(id);
var collapsibles = document.getElementById(collapasibleName);
if(collapsibles.className == 'home__questions-content collapse' || collapsibles.className == 'home__questions-content collapsed')
{
alert("Sdfsdfdsf")
toggleColor.classList.remove('home__questions-title-show');
}
if(collapsibles.className == 'home__questions-content collapse show') {
alert("in show")
toggleColor.classList.add('home__questions-title-show');
}
}
.home__more-questions-content {
padding-right: 40px;
padding-left:40px;
padding-bottom: 20px;
background-color: $white-color;
position:relative;
max-width: 1080px;
margin: auto;
}
.home__questions-content-tile {
margin-bottom: 10px;
border:1px solid #eee;
}
.home__questions-content-title {
padding:20px;
background-color: #000
cursor: pointer;
}
.home__questions-content {
padding-top: 0;
padding-right:20px;
padding-left:20px;
padding-bottom:20px;
}
.home__questions-title-show { background-color: #fff; }
.collapse {
display:none;
}
.collapse.show {
display: block;
}
.collapsing {
position: relative;
height: 0;
overflow: hidden;
transition: height 0.35s ease;
}
<div class="home__more-questions-content" id="accordion">
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-one" data-parent="#accordion" id="collapse-one" onclick="collapse(event, this.id,'collapsible-one');">
<h2>
// title 1 here
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-one">
//title 1's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-two" data-parent="#accordion" id="collapse-two" onclick="collapse(event, this.id,'collapsible-two');">
<h2>
//title 2
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-two">
//title 2's content here
</div>
</div>
<div class="home__questions-content-tile">
<div class="home__questions-content-title" data-toggle="collapse" data-target="#collapsible-three" data-parent="#accordion" id="collapse-three" onclick="collapse(event, this.id, 'collapsible-three');">
<h2>
//title 3
</h2>
</div>
<div class="home__questions-content collapse" id="collapsible-three">
// title 3's content here
</div>
</div>
</div>
Here is the code, explanation is in the comment of the question.
Add new code
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
If current block is opened, then close it and return from further processing.
const container = document.querySelector('.container')
container.addEventListener('click', e => {
if (e.target.parentNode.classList.contains('active')) {
e.target.parentNode.classList.remove('active')
return
}
const collapsable = document.querySelectorAll('.item')
Array.prototype.forEach.call(collapsable, el => {
el.classList.remove('active')
})
e.target.parentNode.classList.add('active')
})
.container {
width: 500px;
margin: 0 auto;
color:darkslategrey;
}
.item {
margin: 10px 0;
border-bottom: 1px solid #666;
padding: 5px 10px;
}
.item.active h3 {
color:aquamarine;
}
p {
overflow: hidden;
transition: height .5s ease;
height: 0px;
}
.item.active p {
height: 80px;
}
<div class="container">
<div class="item active">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
<div class="item">
<h3>I am a title</h3>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni minus neque nisi, rem doloribus unde quisquam, similique distinctio voluptate mollitia praesentium quo ut magnam ducimus nemo vitae soluta impedit harum?</p>
</div>
</div>
Didn't really know how to explain my problem in the title, my question is how do I make it so when I press the top box the other two boxes move down so you can see the text? The same goes for the other two boxes, if I press the middle the last box moves and when I press the last one the top and the middle stays. Plus the boxes has to go back to it's original place. Please I need help with this
$(".faq,.faq2,.faq3").click(function() {
$(this).find(".faq-box-more").toggleClass("open");
$(".faq,.faq2,.faq3").not(this).find(".faq-box-more").removeClass("open");
});
.faq,
.faq2,
.faq3 {
height: 100px;
width: 500px;
background: red;
position: relative;
top: 100px;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
position: absolute;
top: 50%;
transform: translate(0, -50%);
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
position: absolute;
height: 0%;
top: 100%;
background-color: #222;
color: #fff;
width: 100%;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
.open {
height: 140% !important;
}
<link href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq2">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq3">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>
see snippet below or jsfiddle
if you don't want to use the jqueryUI accordion and want to learn how it actually works, it's something like this
in CSS do not use absolute positioning on faq-box-more as it won't occupy any space. instead hide it with display:none
for JQ
first, you don't need to add different classes to all the faq divs, you can add one common class and then select the respective faq-box-more connected to the faq you click on , using jQuery methods below
when you click on faq-box ( either one of them ) , in a variable ( for cleaner and concise code ) you store the corresponding faq-box-more .
you do this by using sibling() method. searching .faq-box's ' brothers ' for the .faq-box-more . in HTML structure faq-box and faq-box-more are on the same level, therefore they are siblings
then using an if condition you check if the previous selected faq-box-more is visible or not. IF YES -> close it , IF NO -> open IT .
you close and open using slideUp() and slideDown() methods ( click on the methods to see more info about them )
then, you also want to find any previous opened faq-box-more and close them, so only one is opened at one time ( the one corresponding to the box you clicked on ) . to do this you use the parents() method to 'climb' up the HTML structure and get to faq and then using siblings() and find() you find the .faq-box-more , and if it is open, you hide it with slideUp()
i think it's important that you try to understand the process behind the accordion and not just copy-paste it .
if you have anymore questions on this subject, feel free to ask in the comments
P.S. you had many problems in your code ( CSS ), it tried to correct some of them but also i wanted not to change too much your code.
$(".faq-box").on("click",function() {
var boxMore = $(this).siblings(".faq-box-more")
if ($(boxMore).is(":visible")) {
$(boxMore).slideUp()
} else {
$(boxMore).slideDown(500)
}
$(this).parents(".faq").siblings().find(".faq-box-more").slideUp()
});
.faq {
width: 500px;
background: red;
position: relative;
left: 50%;
transform: translate(-50%, 0%);
}
.faq-box {
position: relative;
height: 100%;
width: 100%;
background: #333;
cursor: pointer;
padding: 0 20px;
}
.faq-box h2 {
color: #fff;
text-transform: uppercase;
letter-spacing: 3px;
font-size: 1.9rem;
}
.faq-box i {
position: absolute;
left: 96%;
top: 50%;
font-size: 3rem;
transform: translate(-100%, -50%);
color: #fff;
}
.faq-box-more {
background-color: #222;
color: #fff;
width: 100%;
height:200px;
display:none;
}
.faq-box-more p {
position: absolute;
width: 100%;
padding: 20px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
<div class="faq">
<div class="faq-box">
<h2>lorem ipsum</h2>
<i class="ion-ios-arrow-down"></i>
</div>
<div class="faq-box-more">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Consequuntur numquam, atque nemo pariatur maiores eos harum, ab magni nisi quod, commodi ipsum totam vel nihil voluptatum vitae quisquam, qui amet!</p>
</div>
</div>
</section>