Make element to get full page's width - javascript

I want to make a front page which is divided into 2 section (1/2 page's width for a section), and whenever someone is hovering over a section it should take 2/3 of the page's width.
When a section gets clicked it should take the width of the whole page.
HTML / CSS / JavaScript:
const leftPanel = document.getElementsByClassName('panel--left')[0];
const rightPanel = document.getElementsByClassName('panel--right')[0];
const mouseEnterHandler = e => {
e.target === leftPanel ? leftPanel.style.flexGrow = '2' : rightPanel.style.flexGrow = '2';
};
const mouseLeaveHandler = e => {
e.target === leftPanel ? leftPanel.style.flexGrow = '1' : rightPanel.style.flexGrow = '1';
};
const clickLeftPanelHandler = e => {
leftPanel.style.flexGrow = '1';
rightPanel.style.flexGrow = '0';
e.stopPropagation();
};
const clickRightPanelHandler = e => {
leftPanel.style.flexGrow = '0';
rightPanel.style.flexGrow = '1';
e.stopPropagation();
};
leftPanel.addEventListener('mouseenter', mouseEnterHandler);
rightPanel.addEventListener('mouseenter', mouseEnterHandler);
leftPanel.addEventListener('mouseleave', mouseLeaveHandler);
rightPanel.addEventListener('mouseleave', mouseLeaveHandler);
leftPanel.addEventListener('click', clickLeftPanelHandler);
rightPanel.addEventListener('click', clickRightPanelHandler);
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100vh;
text-align: center;
width: 100%;
}
.panel {
display: flex;
flex-direction: column;
height: inherit;
justify-content: space-around;
padding: 25px;
transition: flex-grow 0.75s ease;
}
.panel--left {
background-color: #ffffff;
flex-grow: 1;
}
.panel--right {
background-color: #dddddd;
flex-grow: 1;
}
.panel--left:hover,
.panel--right:hover {
flex-grow: 2;
}
.panel--left:active,
.panel--right:active {
flex-grow: 1;
}
.panel__title {
color: #3a424a;
font-family: 'Roboto Mono', sans-serif;
font-size: 12px;
font-weight: 900;
letter-spacing: 1em;
margin: 0 0 45px 0;
text-transform: uppercase;
}
.panel__header {
color: #3a424a;
font-family: 'Roboto', sans-serif;
font-size: 48px;
font-weight: 900;
letter-spacing: 0.05em;
line-height: 60px;
margin: 0 auto 55px;
max-width: 525px;
text-transform: capitalize;
}
.panel__description {
color: #6d7d8c;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 30px;
margin: 0 auto 50px;
max-width: 625px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<div class="container">
<section class="panel panel--left">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
<section class="panel panel--right">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
</div>
</main>
</body>
</html>
The problem is that I can't get how I can make the second section to shrink to 0. I know how flex-grow works, but it's the closest look that I could get.
Hope I have expressed myself understandably.


Just set width: 0 and dont forget about padding: 0 for the second section when clicking on it


I have made changes to styling to give both hover and clicked achieve 2/3 and 100% respectively (currently added for panel--left but you can copy same for right panel also.).
You just need to do following:
Append class "clicked" on click of element.
Hope this helps.
PS: scrollbar which you see is because of header font-size. But I presume you will handle the font in smaller viewports.
cheers,
Ashok
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
.container {
display: flex;
height: 100%;
text-align: center;
}
.panel {
height: inherit;
display: inherit;
padding: 25px;
width:50%;
}
.panel--left {
background-color: #ffffff;
}
.panel--left:hover{
flex: 0 0 66%;
}
.panel--left.clicked{
flex: 0 0 100%;
}
.panel--left.clicked+.panel--right{
display:none;
}
.panel--right {
background-color: #dddddd;
}
.panel__title {
color: #3a424a;
font-family: 'Roboto Mono', sans-serif;
font-size: 12px;
font-weight: 900;
letter-spacing: 1em;
margin: 0 0 45px 0;
text-transform: uppercase;
}
.panel__header {
color: #3a424a;
font-family: 'Roboto', sans-serif;
font-size: 48px;
font-weight: 900;
letter-spacing: 0.05em;
line-height: 60px;
margin: 0 auto 55px;
max-width: 525px;
text-transform: capitalize;
}
.panel__description {
color: #6d7d8c;
font-family: 'Roboto', sans-serif;
font-size: 14px;
font-weight: 400;
letter-spacing: 0.05em;
line-height: 30px;
margin: 0 auto 50px;
max-width: 625px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<main>
<div class="container">
<section class="panel panel--left ">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
<section class="panel panel--right">
<div class="panel__text-content">
<p class="panel__title">Sample text</p>
<h1 class="panel__header">Sample text</h1>
<p class="panel__description">Phasellus nec semper ex, ac mollis eros. Maecenas diam nunc, iaculis id est vel, laoreet pulvinar nisl. Aenean vestibulum auctor nulla, a vulputate nibh mollis nec. Sed odio arcu, laoreet nec nulla quis, ornare tincidunt urna. Phasellus pellentesque quam sit amet erat consectetur dapibus.</p>
</div>
</section>
</div>
</main>
</body>
</html>


i have edited my code, and if i am not wrong, you want " on mouse hover, section will have 2/3 size and on click, the section will be of full size (page size). "
Code to replace :-
const mouseEnterHandler = e => {
e.target === leftPanel ? leftPanel.style.width = '0' : rightPanel.style.width = '0';
};
const mouseLeaveHandler = e => {
e.target === leftPanel ? leftPanel.style.width = '0' : rightPanel.style.widht = '0';
};
const clickLeftPanelHandler = e => {
leftPanel.style.width= '100%';
rightPanel.style.display = 'none';
};
const clickRightPanelHandler = e => {
leftPanel.style.display = 'none';
rightPanel.style.width = '100%';
};
you just need to replace the part of javascript with my code and see if it is what you need. please give me feedback on my answer. if it helps or not. thanks...

Related

Testimonial slider - css

I have the following code:
<div id="box">
<div class="wrapper">
<div class="testimonial-container" id="testimonial-container">
<div id="testimonial1" class="active">
<img src="" />
</div>
</div>
<button id="prev" onclick="prev()"><</button>
<button id="next" onclick="next()">></button>
</div>
</div>
#box {
position: relative;
width: auto;
left: auto;
margin: auto;
max-width: 70em;
min-height: 26em;
max-height: 70em;
}
.img-con {
position: absolute;
}
.img-con img {
height: 1px;
width: 1px;
}
.testimonial-container {
margin-top: 1%;
width: 85%;
height: 100%;
position: relative;
margin: auto;
padding: 1.8em 1.2em;
}
.testimonial-container p {
color: #8c8c90;
text-align: center;
font-size: 0.9em;
line-height: 2em;
letter-spacing: 0.05em;
}
.testimonial-container img {
display: block;
margin: 1.8em auto 1.25em auto;
border-radius: 50%;
width: 4.4em;
}
.testimonial-container h3 {
color: #2d3d67;
font-size: 1em;
text-align: center;
}
.testimonial-container h6 {
color: #bcc4da;
font-size: 0.9em;
letter-spacing: 0.03em;
font-weight: 400;
text-align: center;
}
.wrapper button {
font-size: 1.8em;
color: #0a69ed;
height: 2.2em;
width: 2.2em;
position: absolute;
margin: auto;
top: 0;
bottom: 0;
background-color: #ffffff;
border: none;
border-radius: 50%;
-webkit-box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
box-shadow: 0 0 1em rgba(0, 0, 0, 0.25);
cursor: pointer;
}
button#next {
right: -1.1em;
}
button#prev {
left: -1.1em;
}
#media screen and (max-width: 650px) {
.wrapper {
font-size: 14px;
}
}
window.addEventListener("load", function() {
document.getElementById("loader").style.display = "none";
document.getElementById("box").style.display = "block";
});
const testimonials = [
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
},
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
},
{
name: "example",
job: "example",
image: "https://static-exp1.licdn.com/sc/h/244xhbkr7g40x6bsu4gi6q4ry",
testimonial:
"Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam et erat arcu. Quisque mi quam, accumsan non sagittis vitae, sodales ut elit. Donec a magna ut leo eleifend dapibus. Curabitur semper placerat fringilla. Suspendisse potenti. Suspendisse pretium elit vel vulputate varius. "
}
];
let f = 0; // current slide
let j = testimonials.length; // total slides
let testimonialContainer = document.getElementById("testimonial-container");
function next() {
f = (j + f + 1) % j;
displayTestimonial();
}
function prev() {
f = (j + f - 1) % j;
displayTestimonial();
}
let displayTestimonial = () => {
testimonialContainer.innerHTML = `
<p>${testimonials[f].testimonial}</p>
<img src=${testimonials[f].image}></img>
<h3>${testimonials[f].name}</h3>
<h6>${testimonials[f].job}</h6>
`;
};
window.onload = displayTestimonial;
This outputs:
The only problem is that for some reason, it cuts out the button at the end.
Expected Output:
How can I fix this? Thanks
I tried to change the width of the #box but it did not affect anything. Im pretty sure the problem is coming from #box but I'm not sure which part directly affects it, since doing width: auto wont change anything either.

I have solved this problem, you can take a look at my version
https://codepen.io/bozzhik/pen/bGKReqm
I tried to wrap it all in a container block and set the margins 50px
<div id="container"</div>
and properties for this block
#container { margin: 50px;}
It turned out what I needed (this is my first help on this site)

Prev and next buttons in modal gallery doesn't work

I found modal gallery example and tried to adapt it to my needs but now I have a problem with the prev - next buttons... Do you have any suggestion? (javascript newbee)
CODEPEN
HTML
<div class="row">
<div class="col">
<img src="https://static.pexels.com/photos/385997/pexels-photo-385997.jpeg" onclick="openLightbox(this);toSlide(1)" class="hover-shadow preview">
</div>
<div class="col">
<img src="https://static.pexels.com/photos/574521/pexels-photo-574521.jpeg" onclick="openLightbox(this);toSlide(2)" class="hover-shadow preview">
</div>
<div class="col">
<img src="https://static.pexels.com/photos/386009/pexels-photo-386009.jpeg" onclick="openLightbox(this);toSlide(3)" class="hover-shadow preview">
</div>
</div>
<div id="Lightbox" class="modal">
<span class="close pointer" onclick="closeLightbox()">×</span>
<div class="modal-content">
<div class="slide">
<img id="modal-slides" class="image-slide" alt="END OF SLIDESHOW GROUP" />
</div>
<a class="previous" onclick="changeSlide(-1)">❮</a>
<a class="next" onclick="changeSlide(1)">❯</a>
</div>
</div>
</div>
</div>
JS
var slideIndex = 1;
showSlide(slideIndex);
function openLightbox(element) {
document.getElementById('Lightbox').style.display = 'block';
document.getElementById("modal-slides").src = element.src;
}
function closeLightbox() {
document.getElementById('Lightbox').style.display = 'none';
}
function changeSlide(n) {
showSlide(slideIndex += n);
}
function toSlide(n) {
showSlide(slideIndex = n);
}
function showSlide(n) {
const slides = document.getElementsByClassName('slide');
if (n > slides.length) {
slideIndex = 1;
}
if (n < 1) {
slideIndex = slides.length;
}
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
slides[slideIndex - 1].style.display = 'block';
}
I have tried various options but my javascript knowledge is poor. I am grateful for any help.
EDIT
prettyInPink I tried to do what you suggested, here is example:
CODEPEN
When I open modal by clicking in last picture (number 8), everything is OK, but when modal is opened with any other picture, PREV - NEXT doesn't works right... Displayed images are in some way random... Any suggestion?

You could use data attributes set to your images data-image and target those.
let _body = document.querySelector('body'),
galleryImg = document.querySelectorAll('.gallery img'),
modalWindow = document.getElementById('modal-gall'),
modalImg = document.getElementById('modal-slides'),
closeModal = document.getElementById('closem'),
nextBtn = document.getElementById('nextm'),
prevBtn = document.getElementById('prevm'),
curSlide;
galleryImg.forEach((img) => {
img.addEventListener('click', function() {
curSlide = Number(this.dataset.image);
modalImg.src = this.src;
_body.classList.add('modal-open');
});
});
nextBtn.addEventListener('click', function() {
curSlide === galleryImg.length ? curSlide = 1 : curSlide += 1
modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
});
prevBtn.addEventListener('click', function() {
curSlide === 1 ? curSlide = galleryImg.length : curSlide -= 1
modalImg.src = document.querySelector('.gallery img[data-image="'+(curSlide)+'"]').src;
});
closeModal.addEventListener('click', function(e) {
e.preventDefault();
_body.classList.remove('modal-open');
});
body {
font-family: Tahoma, sans-serif;
margin: 0;
background-color: #514c5c;
color: white;
}
.gall-container {
text-align: left;
padding: 0 2% 0 2%;
width: auto;
}
.gall-text {
text-align: left;
font-size: 16px;
padding: 50px 5px 2px 5px;
width: 100%;
}
.gallery {
display: flex;
height: auto;
flex-wrap: wrap;
justify-content: left;
align-content: flex-start;
padding: 5px 0 5px 0;
}
.gallery > img {
max-width: 90vw;
max-height: 200px;
cursor: zoom-in;
display: block;
padding: 6px;
}
#modal-gall {
display: none;
position: fixed;
z-index: 1;
left: 0;
top: 0;
bottom: 0;
right: 0;
padding: 8px;
overflow: hidden;
background-color: rgba(0, 0, 0, 0.97);
align-items: center;
justify-content: center;
}
.modal-open #modal-gall {
display: block;
}
.modal-content {
position: relative;
width: 100%;
height: auto;
text-align: center;
}
#modal-slides {
display: block;
max-width:100%;
max-height: calc(100vh - 16px);
margin: auto;
}
#closem {
cursor: pointer;
color: #9e97b1;
position: absolute;
top: 26px;
right: 0px;
font-size: 40px;
font-weight: bold;
border-radius: 5px 0 0 5px;
padding: 2px 16px 8px 16px;
z-index: 2;
background-color: #29272e;
text-decoration: none;
}
#closem:hover,
#closem:focus {
color: red;
cursor: pointer;
}
#prevm,
#nextm {
cursor: pointer;
position: absolute;
top: 46%;
width: auto;
padding: 10px 22px;
margin-top: -10px;
color: #9e97b1;
font-weight: bold;
font-size: 30px;
user-select: none;
-webkit-user-select: none;
background-color: #29272e;
text-decoration: none;
}
#prevm {
left: 0;
border-radius: 0 5px 5px 0;
}
#nextm {
right: 0;
border-radius: 5px 0 0 5px;
}
#prevm:hover,
#nextm:hover {
background-color: #322c42;
}
<div class="gall-container">
<div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 02</b>
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla.
<br><span style="color: #b1afaf; font-size: 80%;">>> Cras non commodo massa.</span><br>
</div>
<div class="gallery">
<img src="https://i.postimg.cc/sxLJ4WgV/08.jpg" alt="08 Image description" data-image="8">
<img src="https://i.postimg.cc/vm73wD3z/07.jpg" alt="07 Image description" data-image="7">
<img src="https://i.postimg.cc/qvyG2zVT/06.jpg" alt="06 Image description" data-image="6">
<img src="https://i.postimg.cc/MTWt6xL8/05.jpg" alt="05 Image description" data-image="5">
<div class="gall-text"><b style="color: silver; font-size: 120%;">EXIBITION 01</b>
<br> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc egestas mauris rhoncus, aliquam turpis a, tempus erat. Proin sit amet cursus felis. Etiam rhoncus tortor id nunc viverra, sed imperdiet leo congue. Nam tristique elementum gravida. In efficitur odio at lorem pretium, at lobortis dui hendrerit. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse eu erat facilisis, ullamcorper mi id, semper libero. Suspendisse iaculis in ipsum sed luctus. Duis cursus varius dui at fringilla.
<br> <span style="color: #b1afaf; font-size: 80%;">>> Cras non commodo massa.</span><br>
</div>
<img src="https://i.postimg.cc/HsJzs66j/04.jpg" alt="04 Image description" data-image="4">
<img src="https://i.postimg.cc/jq3vbpQG/03.jpg" alt="03 Image description" data-image="3">
<img src="https://i.postimg.cc/Xqq85L3H/02.jpg" alt="02 Image description" data-image="2">
<img src="https://i.postimg.cc/C1m7dXyn/01.jpg" alt="01 Image description" data-image="1">
</div>
<div id="modal-gall">
×
<div class="modal-content">
<img id="modal-slides" alt="">
</div>
<a id="prevm">❮</a>
<a id="nextm">❯</a>
</div>
</div>

How to display a div when clicking on a button with js?

-"Maybe this question is one of the duplicate question options as I took it from another answer"
What I am trying to do is that when clicking on a button of an article tag (it is an example) a div with specific information of that article is shown and that the button changes logo. The point is that if that button is clicked, another div from another article cannot be displayed at the same time
The images explain them better:
This is how it should look at first
This is what it should look like when the button is clicked
And this should be seen when clicking on the other button:
(This is how it should look on a cell phone, that's important because of the code I'm going to show)
And this is a code that I found and that more or less works, but it fails when it is for example a cell phone or when wanting to include more articles:
var sharedCont = document.getElementById('shared-container');
var allCont = document.querySelectorAll('#accordion-container');
var jsaccordion = {
init : function (target) {
var headers = document.querySelectorAll("#" + target + " .accordion-btn");
if (headers.length > 0) { for (var head of headers) {
head.addEventListener("click", jsaccordion.select);
}}
},
select : function () {
var targ1 = this.parentElement.closest('#accordion-container'), // find parent
targText = targ1.querySelector('.accordion-text').innerHTML; // grab text for shared container
if( targ1.classList.contains('active') ){
// when clicked, if active, reset them all
targ1.classList.remove('active');
sharedCont.innerHTML = '';
sharedCont.classList.remove('active');
} else {
// when clicked, reset them all, then activate
for (let i = 0; i < allCont.length; i++) {
var el = allCont[i];
el.classList.remove('active');
}
targ1.classList.add('active');
sharedCont.innerHTML = targText;
sharedCont.classList.add('active');
}
}
};
window.addEventListener('load', function(){
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
overflow: hidden;
}
#accordion-container {
position: relative;
}
#accordion-container button::before {
content: '+' !important;
}
#accordion-container.active button::before {
content: '-' !important;
}
#accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
#accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
/* .accordion-btn.open + .accordion-text{
display: block;
} */
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
display: none;
}
#shared-container.active {
display: block;
text-align: center;
}
#shared-container p {
margin: 0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class='row'>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div id="accordion-container" class='col-6'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
<div id="shared-container"></div>
</body>
</html>
I repeat, that is taken from this question: how to display different div on button click with JS?
I am very newbie, but I liked the idea of ​​that question and wanted to know if it is possible to do it.

var jsaccordion = {
init: function(target) {
var headers = $("." + target + " .accordion-btn");
if (headers.length) {
headers.on('click', jsaccordion.select);
}
},
select: function() {
var tar = $(this).closest('.accordion-container');
$('#shared-container').remove();
if (tar.hasClass('active')) {
tar.removeClass('active')
} else {
$('.active').removeClass('active')
tar.addClass('active');
var targText = tar.find('.accordion-text').html();
var sharedCont = "<div id='shared-container'>" + targText + "</div>";
if($('body').width() > 768){
tar = tar.parent();
}
tar.after(sharedCont);
}
}
}
window.addEventListener('load', function() {
jsaccordion.init("accordion-container");
});
body {
max-width: 90%;
margin: 0 auto;
}
.accordion-container {
position: relative;
}
.accordion-container button::before {
content: '+' !important;
}
.accordion-container.active button::before {
content: '-' !important;
}
.accordion-container.active::after {
content: '';
width: 0;
height: 0;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid orange;
position: absolute;
bottom: -2rem;
left: 50%;
transform: translateX(-50%);
color: orange;
z-index: 100;
font-size: 3rem;
line-height: 1;
}
.accordion-container .accordion-text {
display: none;
color: #808080;
padding: 15px;
border: 1px solid #ffcc4b;
}
#shared-container {
margin-top: 2rem;
display: block;
width: 100%;
padding: 2rem;
border: 1px solid orange;
text-align: center;
}
#shared-container p {
margin: 0;
}
#media (max-width : 768px){
.col-6{
max-width: 100%;
min-width: 100%;
}
}
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
<h1>Testing testing testing</h1>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class='row'>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class=" text-center">First one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Egestas erat imperdiet sed euismod nisi porta. Ipsum dolor sit amet consectetur adipiscing. Maecenas pharetra convallis posuere morbi leo urna molestie. Nullam vehicula ipsum a arcu. Gravida cum sociis natoque penatibus et magnis. Duis convallis
convallis tellus id interdum velit laoreet. </p>
</div>
</div>
</div>
<div class='col-6 accordion-container'>
<div class="my-3">
<h3 class='text-center'>second one</h3>
<button class='mx-auto d-block accordion-btn btn btn-white border-primary'></button>
<div class="accordion-text">
<p>Tempus egestas sed sed risus pretium quam vulputate dignissim. Risus at ultrices mi tempus imperdiet. Mauris pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Nisl vel pretium lectus quam id leo.</p>
</div>
</div>
</div>
</div>
</body>

MDL - Change + icon to - when clicked?

I have an accordion in place using MDL and JS, I would like to use the + icon when the accordion is closed and when it is clicked and open I would like to display a subtract icon (-).
Would I need to do this through the MDL divs or within the JS? I know I can put in some JS which will change the icon but not sure how to link it with the MDL icons...
Heres what I have so far.
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.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
#padButton {
padding: 0px;
background-color: white;
width: 100%;
/* border: 2px; */
/* border-color: red; */
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: rgb(255, 255, 255);
font-family: 'Courier New', Courier, monospace;
font-size: 24px;
color: #444;
cursor: pointer;
padding: 18px;
/* width: 100%; */
text-align: left;
vertical-align: center;
border: 2px;
outline: 2cm;
border-color: #777;
transition: 0.4s;
/* box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.1); */
/* border-radius: 2px; */
/* overflow: hidden; */
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
background-color: rgb(255, 255, 255);
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0px 18px;
font-family: 'Courier New', Courier, monospace;
/* background-color: grey; */
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
/* border: 2px; */
box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.05);
}
.panel:after {
padding: 10px 18px;
}
.accordion:after {
/* content: '\02795'; Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-amber.min.css" />
</head>
<div id="padButton" class="mdl-cell mdl-cell--6-col">
<div class="accordion">Accordion Section 1
<div align="right">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam
vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui
ante ac lectus.</p>
</div>
</div>

Here is the codepen of one of the ways to solve it:
https://codepen.io/mlzsolti/pen/jvKVpM
Basically, what you have to do, is when you toggle the accordion, also toggle the right icon of the tag. One of the methods in this case is to set the element's innerHTML to the desired icon's name.
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
var icon = this.querySelector("i");
if (this.classList.contains("active")) {
icon.innerHTML = "remove";
} else {
icon.innerHTML = "add";
}
if (panel.style.maxHeight){
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}

You just need to change the value of i tag. For example, to convert plus icon to minus you should change the value to remove
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var icon = this.querySelector("i");
var panel = this.nextElementSibling;
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
icon.innerHTML = "add";
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
icon.innerHTML = "remove";
}
});
}
#padButton {
padding: 0px;
background-color: white;
width: 100%;
/* border: 2px; */
/* border-color: red; */
}
/* Style the buttons that are used to open and close the accordion panel */
.accordion {
background-color: rgb(255, 255, 255);
font-family: 'Courier New', Courier, monospace;
font-size: 24px;
color: #444;
cursor: pointer;
padding: 18px;
/* width: 100%; */
text-align: left;
vertical-align: center;
border: 2px;
outline: 2cm;
border-color: #777;
transition: 0.4s;
/* box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.1); */
/* border-radius: 2px; */
/* overflow: hidden; */
}
/* Add a background color to the button if it is clicked on (add the .active class with JS), and when you move the mouse over it (hover) */
.active,
.accordion:hover {
background-color: rgb(255, 255, 255);
}
/* Style the accordion panel. Note: hidden by default */
.panel {
padding: 0px 18px;
font-family: 'Courier New', Courier, monospace;
/* background-color: grey; */
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
/* border: 2px; */
box-shadow: 0 0px 0px 1px rgba(0, 0, 0, 0.05);
}
.panel:after {
padding: 10px 18px;
}
.accordion:after {
/* content: '\02795'; Unicode character for "plus" sign (+) */
font-size: 13px;
color: #777;
float: right;
margin-left: 5px;
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.grey-amber.min.css" />
</head>
<div id="padButton" class="mdl-cell mdl-cell--6-col">
<div class="accordion">Accordion Section 1
<div align="right">
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons">add</i>
</button>
</div>
</div>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus sed feugiat lectus. Phasellus maximus, ex nec bibendum volutpat, justo erat pellentesque massa, vel malesuada sem lectus tincidunt orci. Aenean eleifend est sit amet dapibus ullamcorper.
Nam ornare finibus ex vitae interdum. Sed quis purus eros. Sed ut porttitor dolor, eget ultrices justo. Sed eu leo porta, mattis libero eu, sagittis metus. Vivamus nec lobortis nisi. Suspendisse posuere enim arcu, at interdum dui congue vitae. Aliquam
vestibulum accumsan magna. Vivamus a arcu nunc. Cras euismod lacinia augue sed elementum. Phasellus dignissim semper mi at sollicitudin. Vivamus maximus semper nulla. Donec luctus, dolor non viverra aliquam, enim arcu imperdiet sem, et pretium dui
ante ac lectus.</p>
</div>
</div>

This is an approach where the logic is completely in the CSS. This means you can change what icon is used by only changing the CSS, not having to touch the HTML or JavaScript.
In the HTML, change the button to this:
<button class="mdl-button mdl-js-button mdl-button--fab mdl-button--mini-fab mdl-js-ripple-effect mdl-button--colored">
<i class="material-icons"><span class=buttontoggle></span></i>
</button>
You basically just have an empty span. The CSS will then fill in the correct content.
In the CSS, add these rules to decide the content based on the presence of the active class:
.accordion.active .buttontoggle::after {
content: "remove"
}
.accordion:not(.active) .buttontoggle::after {
content: "add"
}
Insert "remove" after the buttontoggle span when it is inside an accordian with the active class.
Insert "add" after the buttontoggle span when it is inside an accordian without the active class.
Codepen: https://codepen.io/anon/pen/Kxeaxe

PURE CSS solution (No JS)
Found in here a bit extended: https://stackoverflow.com/a/49626209/1920145
Nevertheless I mannaged to do it even quicker...
Simply put NO CONTENT on your usual material-icons element, and adjust it with CSS for the CSS case you may want. In the link a checkbox is used.
Like this:
input+label>i::before{content:"add_box";}
input:checked+label>i::before{content:"indeterminate_check_box";}
input+label+p+i::before{content:"add_box";}
input:checked+label+p+i::before{content:"indeterminate_check_box";}
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"/>
<input type="checkbox" id="myCheck">
<label for="myCheck">Inside the Label: <i class="material-icons"></i></label>
<p>Outside the Label:</p><i class="material-icons"></i>

Show div in another wrapper while hovering in another

I'm trying to hover on a div inside a wrapper to reveal some text inside another rapper.
I've had a stab at it with the following CSS, to no avail. Here's my attempt thus far:
Fiddle
Here's what I was trying to do with CSS:
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
Javascript may be the way to go here, but I'm a bit of a novice in that regard.
Your help would be greatly appreciated.

Plain JS:
var assodiv = document.getElementById("assodiv"),
assotxt = document.getElementById("assotxt");
assodiv.onmouseover = function(e) {
assotxt.style.display = "block";
};
assodiv.onmouseout = function(e) {
assotxt.style.display = "none";
};
insert this in a <script>-block on bottom of your body-tag

You can try this.
Add this to head:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
Add this javascript:
var asso = $('#asso');
asso.on('mouseenter',function(){
$('.diagramTextWrapper').prepend('<p class="wrapper_text">test</p>');
});
asso.on('mouseleave',function(){
$('.wrapper_text').remove();
});

you can also hide and show your required div on hover event using jquery:
$(document).ready(function(){
$('#assodiv').on( "mouseenter",function() {
$('#assotxt').show();
$('#assotxt').css("background-color", "white");
$("#assotxt").appendTo($("#assotxt_target"));
});
$('#assodiv').on( "mouseleave",function() {
$('#assotxt').hide();
});
});
.btn {
text-decoration: none;
color: #fff;
font-size: 13px;
font-weight: bold;
padding: 0 15px;
line-height: 32px;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
width: 100px;
text-align: center;
text-transform: uppercase;
margin-top: 20px;
margin-bottom: 20px;
cursor: pointer;
}
.btn.blue {
background-color: #19ace4;
}
.btn.blue:hover {
opacity: 0.85;
}
.btn.pill {
-webkit-border-radius: 16px;
-moz-border-radius: 16px;
border-radius: 16px;
}
/* - - - MOBLE VIEW - - - */
#media only screen and (max-width: 640px) {
.mobileViewDiagram {
display: block !important;
margin-left: auto;
margin-right: auto;
transform: scale(0.7);
margin-top: -50px;
margin-bottom: -50px;
}
.HybridDiagram,
#leftWrapper,
#rightWrapper {
display: none;
}
}
/* - - - DESKOTP VIEW - - - */
section {
width: 100%;
height: 476px;
margin: auto;
}
div#leftWrapper {
width: 50%;
height: 476px;
float: left;
}
div#rightWrapper {
margin-left: 50%;
height: 476px;
}
.diagramTextWrapper {
display: block;
margin: auto;
text-align: center;
padding-left: 50px;
padding-right: 50px;
padding-top: 20px;
}
.HybridDiagram {
width: 476px;
height: 476px;
}
.HybridDiagram img {
max-width: 100%;
position: absolute;
}
/* Associates */
.HybridDiagram img:nth-child(1) {
left: 0;
top: 0;
}
/* Staff */
.HybridDiagram img:nth-child(2) {
left: 244px;
top: 0;
}
/* Client */
.HybridDiagram img:nth-child(3) {
left: 38px;
top: 301px;
}
.mobileViewDiagram {
display: none;
}
#asso:hover,
#staff:hover,
#client:hover {
opacity: 0.85;
}
/* My attempt */
#assotxt {
display: none;
}
#assodiv:hover ~ #assotxt {
display: block !important;
background-color: white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<!-- Mobile View -->
<div class="mobileViewDiagram">
<img src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572caeb520c647e2e6e352e8/1462546101367/download.png">
</div>
<!-- Desktop View -->
<section>
<div id="leftWrapper">
<div class="HybridDiagram">
<!-- HOVER TO REVEAL TEXT -->
<div id="assodiv">
<img id="asso" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6a5746fb9a13cdd54e0/1462544038103/a-slice.png">
</div>
<img id="staff" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6af746fb9a13cdd551f/1462544047951/b-slice.png">
<img id="client" src="http://static1.squarespace.com/static/56e975d8f8baf3c1d69ac026/t/572ca6b4746fb9a13cdd553c/1462544052730/c-slice.png">
</div>
</div>
<div id="rightWrapper">
<div id="assotxt_target"></div>
<div class="diagramTextWrapper">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi eget sapien sed risus suscipit cursus. Quisque iaculis facilisis lacinia. Mauris euismod pellentesque tellus sit amet mollis. Nulla a scelerisque turpis, in gravida enim. Pellentesque sagittis
faucibus elit, nec lobortis augue fringilla sed. Donec aliquam, mi in varius interdum, ante metus facilisis urna, in faucibus erat ex nec lectus. Cras tempus tincidunt purus, eu vehicula ante. Duis cursus vestibulum lorem.
Blue Button
</p>
<!-- HOVER SHOULD REVEAL THS TEXT -->
<div id="assotxt">
This should appear on top of existing text inside rightWrapper.
</div>
</div>
</div>
</section>

#assotxt is not a sibling of #assodiv; also :hover should be applied at .mobileViewDiagram element? You can use :hover:after at .mobileViewDiagram, with content set to text to be displayed. Use top, left properties to render text at appropriate position in viewport.
.mobileViewDiagram:hover:after {
display: block !important;
background-color: white;
content:"This should appear on top of existing text inside rightWrapper.";
position:absolute; /* use `top`, `left`, `right` to set position of `content` */
}
jsfiddle https://jsfiddle.net/vhswx2jg/2/

Categories

Resources