Center elements horizontally in div

Center elements horizontally in div - javascript

I am fairly new to HTML and CSS and am trying to align the navigation elements for my slideshow horizontally in a div. I have tried the solutions found here, but am not having any luck with my issue. With my current code, the circle elements are not center aligned with the < > arrows on either side. I think this is a simple fix, I'm just not sure where I'm going wrong in my code. Any help/explanations would be much appreciated!
<!DOCTYPE html>
<html>
<head>
<style>
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
.mySlides {
display: none;
padding: 5px 20px 5px 20px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
width: auto;
color: #888;
font-weight: bold;
font-size: 20px;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
.prev:hover, .next:hover {
background-color: #717171;
}
.dot-container {
text-align: center;
background: #ddd;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
margin-bottom: 5px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
</style>
</head>
<body>
<div class="slideshow-container">
<div class="mySlides">
<h1>Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="dot-container">
<span class="prev" onclick="plusSlides(-1)">❮</span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="next" onclick="plusSlides(1)">❯</span>
</div>
<script>
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
</script>
</body>
</html>

Use flexbox to align the items vertically in combination with line-height (set this the same as the height of the dots) and padding on the container (optional, to make it look nicer).
.dot-container {
text-align: center;
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
padding: 5px;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.prev, .next {
cursor: pointer;
width: auto;
color: #888;
font-weight: bold;
font-size: 20px;
user-select: none;
line-height: 20px;
}

You can vertical align with flex box for example.
This two classes i change:
.dot-container {
height:40px;
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
var slideIndex = 1;
showSlides(slideIndex);
function plusSlides(n) {
showSlides(slideIndex += n);
}
function currentSlide(n) {
showSlides(slideIndex = n);
}
function showSlides(n) {
var i;
var slides = document.getElementsByClassName("mySlides");
var dots = document.getElementsByClassName("dot");
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length
}
for (i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[slideIndex-1].style.display = "block";
dots[slideIndex-1].className += " active";
}
.slideshow-container {
position: relative;
background: #f1f1f1f1;
}
.mySlides {
display: none;
padding: 5px 20px 5px 20px;
text-align: center;
}
/* Next & previous buttons */
.prev, .next {
cursor: pointer;
width: auto;
color: #888;
font-weight: bold;
font-size: 20px;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
}
.prev:hover, .next:hover {
background-color: #717171;
}
.dot-container {
height:40px;
background: #ddd;
display: flex;
justify-content: center;
align-items: center;
}
.dot {
cursor: pointer;
height: 20px;
width: 20px;
background-color: #bbb;
border-radius: 50%;
display: inline-block;
transition: background-color 0.6s ease;
}
.active, .dot:hover {
background-color: #717171;
}
<div class="slideshow-container">
<div class="mySlides">
<h1>Title 1</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 2</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="mySlides">
<h1>Title 3</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
<div class="dot-container">
<span class="prev" onclick="plusSlides(-1)">❮</span>
<span class="dot" onclick="currentSlide(1)"></span>
<span class="dot" onclick="currentSlide(2)"></span>
<span class="dot" onclick="currentSlide(3)"></span>
<span class="next" onclick="plusSlides(1)">❯</span>
</div>

Related

How do I recreate this toggle in CSS?

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>

Why Can't I use array.indexOf(this.innerHTML)?

So I have a list of links in the footer and I want to be able to click on a link and have it swapped out with the link on the top of the list, if it isn't there already. I'm so far able to move the link that is clicked on to the top, but I can't figure out how to move the top link to the position of the one that was clicked? I've tried using indexOf(this.innerHTML) but its saying its not a function.
EDIT: I've also tried nodeList.item() which also didn't work:(
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if(footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log(footerLinks.indexOf(this.innerHTML));
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0,0,0,0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin:2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>

querySelectorAll returns a static NodeList, which isn't an array. To convert it to an array, use spreading [...] It is a collection of HTML elements, so you need to use indexOf(this), not indexOf(this.innerHTML) (because it's not an array of strings).
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if (footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log([...footerLinks].indexOf(this));
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand,
.nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img,
.col-3 h3,
.col-3 p {
position: relative;
top: -8px;
}
.col-2 img,
.col-2 h3,
.col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin: 2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>

How can I close an accordion on mobile?

I have an accordion using just HTML and CSS (no JS).
For desktop, I hover over to expand, and remove the mouse to close the panel.
For mobile, I click to expand, but clicking on the same object doesn't close it. I have to click on the white space to close the panel, which isn't intuitive.
QUESTION: How can I write this code so I click on the accordion to close the panel?...is JS the only way?
HTML
<div class="slider-containers">
<!--effect #1 -->
<div class="slider-container">
<div class="flexbox-slider flexbox-slider-1">
<div class="flexbox-slide">
<div class="img-overlay"><div class="start">ENGAGE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1464213/pexels-photo-1464213.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Engage</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
<div class="slide-bottom"></div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EDUCATE<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1350615/pexels-photo-1350615.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Educate</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
<div class="flexbox-slide">
<div class="img-overlay">
<div class="start">EMPOWER<span id="accordion-expand">+</span></div>
<img src="https://images.pexels.com/photos/1093913/pexels-photo-1093913.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=500" alt="Slide Image" class="panel-img">
</div>
<div class="text-block">
<h3>Empower</h3>
<div class="text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
</div>
</div>
</div>
CSS
$slider-height: 500px;
$text-block-width: 400px;
$dark-font-color: #212121;
$accent-font-color: #CA9CE1;
$light-font-color: #fff;
$text-overlay-color: #000;
$text-overlay-opacity: 0.6;
$slide-overlay-color: #fff;
$slide-overlay-opacity: 0.6;
//transitions and mixins
//transitions mixin
#mixin transition-mix($property: all, $duration: 0.2s, $timing: linear, $delay: 0s) {
transition-property: $property;
transition-duration: $duration;
transition-timing-function: $timing;
transition-delay: $delay;
}
//position absolute mixin
#mixin position-absolute ($top: null, $left: null, $right: null, $bottom: null) {
position: absolute;
top: $top;
left: $left;
right: $right;
bottom: $bottom;
}
.container {
width: 1100px;
margin: 50px auto 0;
}
.link {
display: flex;
justify-content: center;
width: 800px;
margin: 30px auto 0;
a {
#include transition-mix;
display: flex;
align-items: center;
flex-shrink: 0;
margin-right: 40px;
color: inherit;
font: {
size: inherit;
}
text-decoration: none;
&:hover {
color: $accent-font-color;
}
&:last-child {
margin-right: 0;
}
i {
color: $accent-font-color;
margin-right: 9px;
font-size: 30px;
}
}
}
.slider-containers {
width: 100%;
margin: 60px ;
}
.slider-container {
margin-bottom: 60px;
h2 {
text-align: center;
}
}
.flexbox-slider {
margin-top: 50px;
}
.flexbox-slider {
display: flex;
width: 100%;
height: $slider-height;
visibility: hidden;
.flexbox-slide {
#include transition-mix($duration: .3s);
width: 33%;
height: 100%;
position: relative;
overflow: hidden;
cursor: pointer;
visibility: visible;
transform: skewx(-8deg);
//overlay
&:after {
#include position-absolute($top: 0, $left: 0);
content: "";
display: block;
width: 100%;
height: 100%;
background-color: rgba($slide-overlay-color, $slide-overlay-opacity);
z-index: 2;
opacity: 0;
}
img {
#include position-absolute($top: 50%, $left: 50%);
height: auto;
width: auto;
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
z-index: -1;
}
.text-block {
#include position-absolute($bottom: 30px, $left: 30px);
max-width: $text-block-width;
padding: 20px;
border-radius: 5px;
background-color: rgba($text-overlay-color, $text-overlay-opacity);
color: $light-font-color;
z-index: 4;
visibility: hidden;
opacity: 0;
h3 {
font: {
size: 20px;
weight: 700;
}
}
}
}
&:hover {
.flexbox-slide:hover {
flex-shrink: 0;
width: 80%;
}
}
}
/* effect */
.flexbox-slider.flexbox-slider-1 {
.flexbox-slide {
.text-block {
bottom: 60px;
}
}
&:hover {
.start {visibility:hidden}
.flexbox-slide:hover {
.text-block {
#include transition-mix($delay: .5s);
bottom: 30px;
opacity: 1;
visibility: visible;
}
}
}
}
.start {font-weight: bold; color: #fbaf17; font-size: 150%; z-index:1000; padding: 45% 20%;
}
img.panel-img {height:500px !important; }
.img-overlay {
width: 100%;
height: 100%;
background: rgba(51,85,153,.9);
}
.flexbox-slide {border-right: dashed 4px gold;}
.flexbox-slide:last-child {border-right: 0px}
#accordion-expand, .slide-bottom {visibility: hidden}
#media (max-width:960px) {
.flexbox-slider {
flex-direction: column;
height: 200px;
.flexbox-slide {
margin: auto;
width: 75%;
height: 200px !important;
transform: skewX(0deg);
}
.flexbox-slide {border-right: none;}
}
#accordion-expand {float:right; visibility: visible}
.start {margin: 0 20px; padding: 20px; border-bottom: solid 2px gold;}
}
Here's my codepen

Accordion within Accordion

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

jquery accordion - onclick opening all accordion

I have created a custom jquery accordion and I am stuck with the code, when I click on accordion title, its opening both of the accordion where it should open the one where I have clicked, following are the codes:
$(document).ready(function() {
$(".acc-wrap > .acc-head").on("click", function() {
if ($(this).hasClass('active')) {
$(this).removeClass("active");
$(this).siblings('.acc-body').slideUp(200);
$(".acc-wrap > .acc-head").attr('class', 'acc-head opened');
} else {
$(".acc-wrap > .acc-head").attr('class', 'acc-head closed');
$(this).addClass("active");
$('.acc-body').slideUp(200);
$(this).siblings('.acc-body').slideDown(200);
}
});
});
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
<div class="acc-wrap">
<div class="acc-head opened"> Vestibulum </div>
<div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
<div class="acc-head"> Vestibulum 2</div>
<div class="acc-body"> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </div>
</div>
</div>

I think you should use the next-function instead of the siblings-function:
https://api.jquery.com/next/
<style>
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
</style>
`

You can try something like this:
$(this)
// Add/ Remove active and opened as both will always be together.
.toggleClass('active opened')
// Add closed if active not present else remove it
.toggleClass('closed', !$this.hasClass('active'))
// Go to next element
.next()
// Toggle slide on every click
.slideToggle(200)
Also note that $(".acc-wrap > .acc-head"); is pointing to all accordion headers. You should always try to use this and navigate to necessary div.
Sample
$(document).ready(function() {
$(".acc-wrap > .acc-head").on("click", function() {
var $this = $(this)
$this
.toggleClass('active opened')
.toggleClass('closed', !$this.hasClass('active'))
.next()
.slideToggle(200)
});
});
.projects-list {
max-width: 600px;
margin: 0 auto;
background: #E0E0E0;
padding: 15px 0;
font-family: Roboto;
}
body {
margin: 0;
padding: 0;
}
.acc-wrap {
position: relative;
width: 100%;
}
.acc-wrap > .acc-head {
float: left;
width: 100%;
display: block;
background-color: #264796;
padding: 10px;
color: #fff;
font-weight: 600;
border-bottom: 1px solid #ddd;
transition: all 0.2s linear;
position: relative;
}
.acc-wrap > .acc-head.opened {
position: relative;
}
.acc-wrap > .acc-head.opened:after {
content: "\f055";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-wrap > .acc-head.closed {
position: relative;
}
.acc-wrap > .acc-head.closed:after {
content: "\f056";
font-family: fontAwesome;
position: absolute;
right: 15px;
}
.acc-body {
position: relative;
width: 100%;
float: left;
background-color: #fff;
padding: 10px;
border-bottom: 1px solid #ddd;
display: none;
box-sizing: border-box;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css">
<div class="projects-list">
<div class="acc-wrap">
<div class="acc-head">Vestibulum</div>
<div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
<div class="acc-head">Vestibulum 2</div>
<div class="acc-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna.</div>
</div>
</div>

Add This it is much easy and fast than yours http://www.w3schools.com/Bootstrap/tryit.asp?filename=trybs_collapsible_accordion&stacked=h

Instead of using referencing the elements by class you want to use "this".find("element").attr() etc etc. You are targeting all elements matching the class .acc-head when using this $(".acc-wrap > .acc-head");
Alternatively you could reference the targeted element using $(".acc-wrap > .acc-head.active");

$(".acc-wrap > .acc-head:not(.opened)");

<div style="max-width: 300px;">
<div class="panel panel-default">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab">
<a data-toggle="collapse" data-parent="#accordion" href="#collapse6dec" >Vestibulum
<span id="plus"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span> </a>
</h4>
</div>
<div id="collapse6dec" class="panel-collapse collapse">
<div class="panel-body" style="">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<div class="panel panel-default" style="margin-top:-20px">
<div class="panel-heading" style="background-color:#264796;color:#ffffff">
<h4 class="panel-title" id="ab1">
<a data-toggle="collapse" data-parent="#accordion" href="#lorem2" >Vestibulum 2 <span id="plus1"><i class="fa fa-plus-circle" aria-hidden="true"></i></span> <span id="minus1" style="display:none"><i class="fa fa-minus-circle" aria-hidden="true"></i></span></a>
</h4>
</div>
<div id="lorem2" class="panel-collapse collapse">
<div class="panel-body">
<div class="row">
<p class="panel-title" style="font-size: 18px;"> <a data-toggle="collapse" data-parent="#accordion" >Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna. </a></p>
</div>
</div>
</div>
</div>
<script type="text/javascript">
var counter = -1;
$("#ab").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus").css('display','none');
$("#minus").css('display','inline');
}
else{
$("#plus").css('display','inline');
$("#minus").css('display','none');
}
});
$("#ab1").click(function(){
counter++;
if (counter % 2 === 0) {
$("#plus1").css('display','none');
$("#minus1").css('display','inline');
}
else{
$("#plus1").css('display','inline');
$("#minus1").css('display','none');
}
});
</script>

We Keep Coding

JavaScript is the programming language of the Web.

Center elements horizontally in div - javascript

Related

How do I recreate this toggle in CSS?

Why Can't I use array.indexOf(this.innerHTML)?

How can I close an accordion on mobile?

Accordion within Accordion

jquery accordion - onclick opening all accordion

Categories

Resources