I'm trying to recreate this toggle in CSS/HTML and JavaScript. When closed the toggle shows the title: 'Stap 2 Implementatie in de organisatie' and an icon (circle with a plus in it).
When open, it shows some text, and beneath it a section with downloadable tools, they could be implemented as images next to each other, but it's probably more versatile if it's the icon and text separated.
I've managed to create the title, the text underneath it, I just need help with:
Different icon for closed and open toggle
Extra green section in toggle
How to have 20px border radius on button, but only keep the top left and right border radius when clicked/open. (see extra screenshot)
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight:600;
font-family:'Dosis';
border-top-left-radius:20px;
border-top-right-radius:20px;
}
.icon {
float:right;
}
.header {
color:#45b072;
}
.active, .accordion:hover {
background-color: #7d206a;
}
p {
color:#fff;
font-family:'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius:20px;
border-bottom-right-radius:20px;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
You can try it like this, I have explained the changes in comments.
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-radius: 20px; /* You can have border-radius on all sides */
}
.accordion.active {
border-bottom-left-radius: 0px; /* You can set the border-radius of bottom part to 0 */
border-bottom-right-radius: 0px;
}
.icon {
float: right;
height: 30px; /* Define height and width for the icon */
width: 30px;
background-image: url("https://i.stack.imgur.com/Vvuj2.png"); /* Image for the closed panel */
}
.active .icon {
/* Icon for the active panel */
background-image: url("https://i.stack.imgur.com/ZAR5V.png");
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.green-content { /* Properties for the new content */
display: grid;
grid-template-columns: repeat(4, 1fr); /* Four columns for your content as per image */
background: #45b072;
margin: 0 -18px; /* Negative margin so that the parent padding doesn't affect it */
margin-top: 10px;
padding: 18px; /* Same padding as parent */
color: white;
}
<h2>Accordion</h2>
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon"></span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="green-content">
<!-- Extra content added -->
<div class="column-1">
Content
</div>
<div class="column-2">
Content
</div>
<div class="column-3">
Content
</div>
<div class="column-4">
Content
</div>
</div>
</div>
There are probably a lot of takes for this opinion but I think you should ditch the panel.style.dipslay and use class approach instead. So the gist of it is that you add an open state class to the wrapper and based on that you do stuff. I have set it up a bit for you so you can use the class accordion-container--is-open to do stuff with your css when the accordion is open
var accordions = document.querySelectorAll(".accordion-container");
accordions.forEach(element => {
const toggler = element.querySelector('.accordion')
toggler.addEventListener('click', function() {
element.classList.toggle('accordion-container--is-open')
})
})
.accordion {
display: flex;
align-items: center;
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
margin-left: auto;
}
.accordion-container--is-open .icon {
color: aqua;
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
display: none;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.panel > * {
padding: 0 18px;
}
.accordion-container--is-open .panel {
display: block;
}
.accordion__footer {
display: flex;
align-items: center;
height: 4rem;
background-color: lime;
}
.accordion__footer-icon {
width: 2rem;
height: 2rem;
background-color: aqua;
}
<h2>Accordion</h2>
<div class="accordion-container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon">icon</span></button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<div class="accordion__footer">
<span class="accordion__footer-icon">1</span>
<span class="accordion__footer-icon">2</span>
<span class="accordion__footer-icon">3</span>
</div>
</div>
</div>
Have a play with this
I use delegation and content. You can change content for background image
const container = document.getElementById("container");
container.addEventListener("click", function(e) {
const tgt = e.target;
if (tgt.classList.contains("icon")) {
const button = tgt.closest("button");
tgt.classList.toggle("open");
const close = !tgt.classList.contains("open");
tgt.classList.toggle("close",close);
const panel = button.nextElementSibling;
panel.classList.toggle("hide",!close)
}
})
.accordion {
background-color: #7d206a;
color: #fff;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
font-weight: 600;
font-family: 'Dosis';
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}
.icon {
float: right;
display: inline-block;
width: 50px;
}
.icon.open::after {
content: "⭕"
}
.icon.close::after {
content: "❌"
}
.header {
color: #45b072;
}
.active,
.accordion:hover {
background-color: #7d206a;
}
p {
color: #fff;
font-family: 'Dosis';
}
.panel {
padding: 0 18px;
background-color: #7d206a;
overflow: hidden;
border-bottom-left-radius: 20px;
border-bottom-right-radius: 20px;
}
.hide { display: none;}
<h2>Accordion</h2>
<div id="container">
<button class="accordion"><span class="header">Stap 2</span> Implementatie in de organisatie<span class="icon open"></span></button>
<div class="panel hide">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
Related
I am learning JavaScript and have tried to make a modal window open when a button is pressed. I'm using an event listener, but I keep getting an error saying that this block of code is undefined: btnOpenModal.addEventListner('click', openModal);
Any help is most appreciated. Thank you in advance.
const modal = document.querySelector('.modal');
const overlay = document.querySelector('.overlay');
const btnCloseModal = document.querySelector('.close-modal');
const btnOpenModal = document.querySelector('.show-modal');
const openModal = function () {
// console.log('Button clicked');
modal.classList.remove('hidden');
overlay.classList.remove('hidden');
};
const closeModal = function () {
modal.classList.add('hidden');
overlay.classList.add('hidden');
};
btnOpenModal.addEventListner('click', openModal);
btnCloseModal.addEventListner('click', closeModal)
*{
margin: 0;
padding: 0; box-sizing: inherit;
}
html {
font-size: 62.5%;
box-sizing: border-box;
}
body {
font-family: sans-serif;
color: #333;
line-height: 1.5;
height: 100vh;
position: relative;
display: flex;
align-items: flex-start;
justify-content: center;
background: linear-gradient(to top left, #28b487, #7dd56f);
}
.show-modal {
font-size: 2rem;
font-weight: 600;
padding: 1.75rem 3.5rem;
margin: 5rem 2rem;
border: none;
background-color: #fff;
color: #444;
border-radius: 10rem;
cursor: pointer;
}
.close-modal {
position: absolute;
top: 1.2rem;
right: 2rem;
font-size: 5rem;
color: #333;
cursor: pointer;
border: none;
background: none;
}
h1 {
font-size: 2.5rem;
margin-bottom: 2rem;
}
p{
font-size: 1.8rem;
}
/* -------------------------- */
/* CLASSES TO MAKE MODAL WORK */
.hidden {
display: none;
}
.modal {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 70%;
background-color: white;
padding: 6rem;
border-radius: 5px;
box-shadow: 0 3rem 5rem rgba(0, 0, 0, 0.3);
z-index: 10;
}
.overlay {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(3px);
z-index: 5;
}
<button class="show-modal">Show modal</button>
<div class="modal hidden">
<button class="close-modal">×</button> <h1>I'm a modal window </h1>
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do
eiusmod
ea
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex
commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
occaecat cupidatat non proident, sunt in culpa qui officia deserunt
mollit anim id est laborum.
</p> </div>
<div class="overlay hidden"></div>
enter link description here
Hello I'm trying to create a banner add block for donation. This div block should push the page content down. Also there is a close button to close the banner. However, the close button doesn't work. In the banner.js file I'm listening for a click and adding a banner-hide class to each div to close the banner.
Can someone help? I'm including the html css and javascript code blocks here.
html:
<div id="alert-banner" class="banner banner-top alert-primary" role="banner">
<div class="p-4 align-self-end" style="max-width:30em">
<h1 class="pb-4">Help us wake up to a 2020 that changes the way we see vision loss!</h1>
<div class="text-center text-md-left"><a class="btn btn-donate text-center" style="min-width: 14em;" href="https://secure.everyaction.com/">Make a Donation</a>
</div>
</div>
</div>
banner.js:
$(function() {
var add - banner = $('#alert-banner');
var btnClose = $('.banner-close');
btnClose.addEventListener("click", function(closeEvt) {
$(".banner").addClass("banner-hide");
$(".p-4").addClass("banner-hide");
$(".text-center").addClass("banner-hide");
});
});
banner.css
.banner {
position: relative;
width: 100%;
text-align: center;
padding: 8px;
padding-top: 0px;
background-color: rgba(0, 0, 0, 0.5);
max-height: 100px; /* set it at will according to your message's length
in small devices */
top: 0px;
left: 0px;
right: 0px;
border: 1px solid transparent;
border-radius: .25rem;
outline: none !important;
display: block;
}
.banner * {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.banner-bottom {
left: 0;
right: 0;
bottom: 10px;
}
.banner-top {
left: 0;
right: 0;
top: 10px;
}
.banner-right {
right: 10px;
bottom: 10%;
min-height: 10vh;
}
.banner-left {
left: 10px;
bottom: 10%;
min-height: 10vh;
}
.alert-primary {
text-align: left;
vertical-align: middle;
display: inline-block;
white-space: normal;
max-width: 100%;
max-height: 100%;
outline: none !important;
color: #004085;
background-color: #cce5ff;
border-color: #b8daff;
}
.banner-close {
width: 35px;
height: 35px;
position: fixed;
right: 0;
top: 0;
-webkit-appearance: none;
cursor: pointer;
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.banner-close::-moz-focus-inner {
border: 0;
padding: 0;
}
.banner-close:hover,
.banner-close:focus,
.banner-close:active,
.banner-close:visited {
text-decoration: none;
text-align: center;
padding: 0;
color: #fff;
font-style: normal;
font-size: 35px;
font-family: Arial, Baskerville, monospace;
line-height: 35px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
border: 0;
background: none;
outline: none;
-webkit-box-shadow: none;
box-shadow: none;
}
.banner-close:active {
top: 1px;
}
Please add the missing elements to your question as suggested in the comments. I don't know what is going on with your variables, but there is a much simpler way to do what you want. I took the liberty to add the html for a button and used the css you have there. You can see it work in this jsfiddle. As you can see the lorem ipsum content is pushed down.
Here is my suggested js function:
$(document).ready(function() {
$('.banner-close').click(function(e) {
e.preventDefault();
$("#alert-banner").hide();
});
});
This is how I modified the HTML for test purpose:
<div id="alert-banner" class="banner banner-top alert-primary" role="banner">
<div class="p-4 align-self-end" style="max-width:30em">
<h1 class="pb-4">Help us wake up to a 2020 that changes the way we see vision loss!</h1>
<div class="text-center text-md-left"><a class="btn btn-donate text-center" style="min-width: 14em;" href="https://secure.everyaction.com/">Make a Donation</a>
</div>
<div>
<button type="button" class="banner-close" data-dismiss="alert" aria-label="Close">×</button>
</div>
</div>
</div>
<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</div>
I am working on requirement where I need to show a popup message on click of some text (This is a dynamic text whose length can vary), am trying to achieve something as shown in the below screenshot.
But the problem am facing is when I tr to position it if I change the text to something lengthy or short the popup still remains in the same place, I want it to be positioned with respect to the "*" irrespective of the text length (In this example: Ready within 4 hours)
The HTML:
<div class="bopis-messaging">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim
ad minim veniam, quis nostrud
</div>
</div>
<style>
.bopis-messaging {
position: relative
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
right: 30%;
top: -23%;
height: auto;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}
</style>
It gave me this result, but if try to change the text to "Ready within 4 hours " , the popup still stays in the same position, whereas i want it to be over the "" .
Your help will be much appreciated
A nice approach would be to use data- attributes on your html, then display them via a pseudo-element content property.
/*just for the SO snippet positioning*/
.bopis-messaging {
margin: 140px;
}
/* stablishes that any anchor tag with a data-tooltip attibute
/* will be relative positioned, so the pseudo-element will be
/* absolute positioned accordingly*/
a[data-tooltip] {
position: relative;
}
/* displays a tooltip as an absolute positioned pseudo-element,
/* which contents are in the data-tooltip html attribute
/* starts as zero-scaled for a fancy display on hover*/
a[data-tooltip]::after {
content: attr(data-tooltip);
display: block;
position: absolute;
width: 180px;
border: 1px solid #333;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
bottom: 100%;
right: 0;
transform-origin:bottom;
transform: translate(50%, 0) scale(0);
transition: transform 200ms ease-out;
}
/*reveals the tooltip on hover*/
a[data-tooltip]:hover::after {
transform: translate(50%, 0) scale(1);
}
<div class="bopis-messaging">
Ready within 7 Days *
<br>
longer text is longer is longer is longer *
<br>
short text *
</div>
edit: Since you specified additional requirements, here's a version with a hiding div instead, as CSS pseudo-elements "content" will not parse HTML from a data-attibutes
/*just for SO snippet positioning*/
.bopis-messaging {
margin:170px;
}
.bopis-hoverable{
position:relative;
display:inline;
}
/* displays a tooltip as an absolute positioned element,
/* starts as zero-scaled for a fancy display on hover*/
.bopis-msg-content {
display: block;
position: absolute;
width: 230px;
border: 1px solid #333;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 10px;
bottom: 100%;
right: 0;
transform-origin:bottom;
transform: translate(50%, 0) scale(0);
transition: transform 200ms ease-out;
}
/*reveals the tooltip on hover*/
.bopis-hoverable:hover > .bopis-msg-content{
transform: translate(50%, 0) scale(1);
}
<div class="bopis-messaging">
<div class="bopis-hoverable">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small"> <h4>Ready within 7 Days</h4>
<p>Lorem ipsum dolor sit amet, <strong>consectetur</strong> adipiscing elit, sed do eiusmod <br> ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud</p>
</div>
</div>
</div>
Try this
.bopis-messaging {
position: relative;
display: inline-block;
}
.margin-top-200 {
margin-top:200px;
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
z-index: 1;
bottom: 125%;
left: 50%;
margin-left: -60px;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}
<div class="margin-top-200"></div>
<div class="bopis-messaging">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim
ad minim veniam, quis nostrud
</div>
</div>
If your "*" is always at the end of the text you can solve it like this:
(Se my comments in the css).
<div class="container">
<!--Just a bunch of br element to place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution-->
<div class="bopis-messaging">
Ready within 7 Days *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do e
iusmod tempor incididunt ut labore et dolore magna aliqua. Utenim
ad minim veniam, quis nostrud
</div>
</div>
</div>
<style>
.bopis-messaging {
margin-top: 300px; /*place the box further down the page. If not the popup wil go out of the screen. So this is a limitation of this solution*/
position: relative;
display: inline-block; /* Important so that the container will dynamically fit to the size of the content */
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
left: 100%; /*Place it at the end of the parent element */
margin-left: -116px; /*half of width (this also includes the padding) to place the box back so its at the center of the "*" NB*/
bottom: 200%; /*Place it above */
height: auto;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}
/*Added a triangle:*/
.bopis-msg-content:after {
content: '';
position: absolute;
top: 100%;
left: 50%;
margin-left: -10px;
width: 0;
height: 0;
border-top: solid 15px #000;
border-left: solid 15px transparent;
border-right: solid 15px transparent;
}
</style>
Here is the jsfiddle have a look.
<div class="bopis-messaging">
Ready within 4 Business Business Business Hours *
<div class="bopis-msg-content" data-layout="small">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, seddo eiusmod tempor incididunt ut labore et dolore magna aliqua. Utenim ad minim veniam, quis nostrud
</div>
</div>
CSS
.bopis-messaging {
position: relative;
margin-top: 150px;
display: inline-block;
}
.bopis-msg-content {
width: 180px;
border: 1px solid #333;
position: absolute;
right: -100px;
bottom: 150%;
height: auto;
background: #ffffff;
color: #333333;
font-family: Lato;
font-size: 12px;
line-height: 20px;
padding: 16px;
}
I am trying to embedded accordion within another accordion however it's not working, the embedded accordion will expand only to the size of the first expand accordion, I will need to add extra space in order to show the content, any help is greatly appreciated!
CSS
button.accordion {
background-color: #73560b;
border: 2px solid #ffc600;
border-radius: 0px 10px 0px 10px;
box-shadow: 7px 7px 5px #cccccc;
color: #fff;
cursor: pointer;
padding: 10px 15px 10px 15px;
margin: 4px 0px 7px 0px;
width: 100%;
font-size: 18px;
transition: 0.4s;
outline: none;
text-align: left;
}
button.accordion.active, button.accordion:hover {
background-color: #926c0e;
}
button.accordion:after {
content: '\002B';
color: #ffc600;
font-weight: bold;
float: right;
}
button.accordion.active:after {
content: "\2212";
}
div.panel {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
HTML
<button class="accordion">Background</button>
<div class="panel">
content
<button class="accordion">item 1</button>
<div class="panel">
content
</div>
</div>
JavaScript
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
}
}
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].onclick = function(){
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
}
}
button.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
button.accordion.active, button.accordion:hover {
background-color: #ddd;
}
div.panel {
padding: 0 18px;
display: none;
background-color: white;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h2>Accordion</h2>
<button class="accordion">Section 2</button>
<div class="panel">
<button class="accordion">Section 1</button>
<div class="panel">
<p>
content
</p>
</div>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</body>
</html>
try this
I have an accordion menu with tabs. When you click on the tabs, information is displayed below one of them, by sliding up and down smoothly.
The problem is that there is a stutter in the animation, during slideUp and slideDown. I also tried animate and adjusting some of the css, but I can't figure it out.
If it helps, here's the fiddle.
HTML:
<div class="project-container">
These don't slide well:
<ul class="project-nav">
<li class="project-tab" id="project-tab-1"><a id="project-tab-link" href="#" class="active">Tab 1</a>
<section class="is-open">
<p id="current-project-title">TITLE</p>
<p>TEXT HERE</p>
</section>
</li>
<li class="project-tab" id="project-tab-2"><a id="project-tab-link" href="#">Tab 2</a>
<section>
INFO HERE<br>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</section>
</li>
</ul>
</div>
<br>
But this slides VERY well:
<br>
<button class="toggle-info">toggle slider<i class="glyphicon glyphicon-chevron-down"></i></button>
<section class="info-container">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </section>
Javascript:
$(document).ready(function() {
var Tabs = {
el: {
nav: $(".project-nav"),
tabs: $(".project-nav > .project-tab > a"),
panels: $(".project-nav > .project-tab > section"),
},
init: function() {
Tabs.bindUIActions();
},
bindUIActions: function() {
Tabs.el.nav
.on(
'click',
'.project-tab > a:not(.active)',
function(event) {
Tabs.deactivateAll();
Tabs.activateTab(event);
event.preventDefault();
}
);
},
deactivateAll: function() {
Tabs.el.tabs.removeClass("active");
Tabs.el.panels.removeClass("is-open").slideUp('slow');
},
activateTab: function(event) {
$(event.target)
.addClass("active")
.next()
.addClass("is-open").slideDown('slow');
}
};
Tabs.init();
////// Slide Doesn't Work For Tabs
$('.project-tab section.is-open').slideDown('slow');
////// Slide Works For Toggle Button
$('.toggle-info').click(function() {
$('.info-container').slideToggle('slow');
$("i", this).toggleClass("glyphicon glyphicon-chevron-right glyphicon glyphicon-chevron-down");
});
});
This your problem
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
You add transition css to slide element, it make slide effect not working correctly, you must remove it
you can try this jsfiddle
I was able to achieve the desired effect using CSS, instead of jquery. I used max-height transitions to make the tabs slide both up and down smoothly.
Here's the updated fiddle.
And here's the new CSS:
///// RESPONSIVE ACCORDION TO TABS
.project-container {
display: block;
}
.project-nav {
list-style: none;
position: relative;
}
.project-nav a:active{
opacity:1;
}
.project-nav .project-tab {
display: inline;
}
.project-nav > .project-tab > a {
display: inline-block;
padding: 10px 15px;
background-color: #00A88C;
border: solid 1px #00A88C;
border-radius: 0px 10px;
text-decoration: none;
color: #fff;
width:40%;
font-size: 30pt;
clear: both;
text-align: center;
}
#project-tab-1 {
margin-right: 2%;
margin-left: 7%;
}
#project-tab-2 {
margin-left: 2%;
}
#project-tab-link:hover {
background-color: #13ebc7;
border-color: #13ebc7;
}
#project-tab-link.active {
color: #00A88C!important;
background-color: rgba(19, 235, 199, 0)!important;
}
#project-tab-link.active:hover {
border-color: #00A88C;
}
.project-nav section {
position: absolute;
top: -9999px;
left: -9999px;
float: left;
color:#5c5c5c;
overflow: hidden;
border: solid 1px #00A88C;
width:100%;
margin-top:10px;
padding-bottom: 15px;
opacity: 0;
}
.project-nav section.is-open {
position: static;
opacity: 100;
}
.project-tab section p {
font-family:'century gothic';
padding: 0px 30px;
}
.project-tab section p:empty {
display: none;
}
#current-project-title{
font-size: 16pt;
}
#current-project-link {
float: right;
padding: 5px;
background: #00A88C;
color:#fff;
margin-right: 30px;
width: auto;
}
#current-project-link:hover {
background: #13ebc7;
}
.project-nav section, .project-nav section.is-open, .project-nav .project-tab a:hover, .project-nav .project-tab a.active, #current-project-link,
#current-project-link:hover, .project-nav section.is-open, .project-nav section {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
#media only screen and (max-width: 730px) {
#front-page-textbox{
background: #0f2347;
color: #fff;
}
.project-container {
margin-bottom: 10px;
}
.project-nav .project-tab a {
display: block;
width:100%;
border-radius: 0px;
}
#project-tab-1, #project-tab-2 {
margin-left: 0;
margin-right: 0;
}
.project-nav .project-tab a.active {
border: solid 1px #13ebc7;
}
.project-nav section {
margin:0;
position: relative;
top: auto;
left: auto;
float: none;
max-height:0;
padding-bottom: 0px;
opacity: 100;
}
.project-nav section.is-open {
border-radius: 0px;
border-top: none;
max-height: 1200px;
}
.project-tab > a:after {
font-family: 'Glyphicons Halflings';
content: "\e080";
float: right;
font-size: 20pt;
margin-top: 10px;
}
.project-tab > a.active:after{
font-family: 'Glyphicons Halflings';
content: "\e114";
float:right;
font-size: 20pt;
margin-top: 10px;
}
/// TOGGLE BUTTON
.toggle-info {
display: block;
width: 100%;
color: #f5f5f5;
padding: 10px 15px;
background-color: #00A88C;
font-size: 30pt;
}
.toggle-info i{
font-size: 10pt;
margin-top: 10px;
float: right;
display: block;
}
.toggle-info:hover {
background-color: #13ebc7;
}
.toggle-info, .toggle-info:hover {
-webkit-transition: all .5s;
-moz-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
.info-container{
padding: 10px 15px;
border: solid 1px #00A88C;
}