I am trying to make a slideshow inside of an accordion, however when I load the code into the browser, the content inside the <a> is beside it, not inside it. Is there any solution to it? I added a lot of code because I don't really know what the problem is, I google and didn't find a single solution, please don't down vote me. The main problem is that when I load the code to debug the <div id="grid4"> is supposed to be inside of <a onclick="openUp4()" id="pane4">, however it loads just side by side.
let slideIndex = [1, 1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] = n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {
slideIndex[no] = 1
}
if (n < 1) {
slideIndex[no] = x.length
}
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
x[slideIndex[no] - 1].style.display = "block";
}
function openUp4() {
var element = document.getElementById("pane4");
element.classList.toggle("active2")
if (element.classList.contains("active2")) {
// document.getElementById("grid2").style.visibility = "visible";
document.getElementById("grid4").style.opacity = 1;
} else {
// document.getElementById("grid2").style.visibility = "hidden";
document.getElementById("grid4").style.opacity = 0;
}
}.pane1 {
background-color: white;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 20px;
position: relative;
text-align: center;
font-size: 20px;
transition: 0.4s;
}
.active2 {
height: fit-content;
}
.grid2 {
display: grid;
gap: 0rem;
grid-template-rows: 1fr;
grid-auto-columns: 1fr;
height: inherit;
justify-content: center;
place-items: center;
overflow: hidden;
}
.blacktitle {
color: #ffffff;
position: absolute;
background-color: #191919;
height: 70px;
width: 50%;
left: -20px;
top: -45px;
border-radius: 10px;
padding: 21px;
letter-spacing: 6px;
}
.mySlides1 {
display: none
}
img {
vertical-align: middle;
max-width: 400px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
}
video {
max-width: 400px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .2);
border-radius: 5px;
margin-top: 40%;
}
/* Slideshow container */
.slideshow-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 400px;
max-width: 400px;
position: relative;
margin: 40px auto auto auto;
}
.videocontainer {
position: relative;
height: 533.333px;
}
/* Next & previous buttons */
.prev,
.next {
cursor: pointer;
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover,
.next:hover {
background-color: #f1f1f1;
color: black;
}<a onclick="openUp4()" id="pane4">
<div >
Concerts
</div>
<div id="grid4">
<div >
<div >
<img src="Concerts/a03c3e49-cdff-4382-87c1-b473de9f6447.jpg" style="width:100%">
</div>
<div >
<img src="Concerts/IMG_6847.png" style="width:100%">
</div>
<div >
<video controls preload="metadata">
<source src="Concerts/IMG_5888.mov" type="video/mp4" style="width:100%">
</video>
</div>
<a onclick="plusSlides(-1, 0)">❮</a>
<a onclick="plusSlides(1, 0)">❯</a>
</div>
</div>
</a>CodePudding user response：
Welcome to StackOverflow!
I must admit I'm having a little trouble understanding the question, but from your code, 2 things pop up immediately:
The first is the usage of <div> inside <a>. You should never use a block element (like div, h1, p, etc) inside an inline element (like a,span,strong, etc). Some browsers might be able to parse it but this is definitely invalid HTML.
A solution to that would be to replace the <div> elements inside the anchor tag with <span> instead, and add a display:block CSS rule to the relevant <span> tags so they mimic how the <div> looks like.
The second issue is around this line:
x[slideIndex[no] - 1].style.display = "block";
x[slideIndex[no] - 1] does not always return an element, so you cannot assume you can access its style property. A safer way to do it would be this:
// Get the element first
const el = x[slideIndex[no] - 1];
// If it exists, *then* access and mutate its properties.
if(el) el.style.display = "block";
CodePudding user response：
I found the answer thanks to @martijn you can't put inside on on , I used button instead and it worked!
CodePudding user response：
I fixed it this works:
<div >
<div >
<div >
<div id="pane4">
<span onclick="openUp4()" >
Concerts
</span>
<span id="grid4">
<span >
<span >
<div style="width: 400px; height: 533px; background-color:"></div>
</span>
<span >
<div style="width: 400px; height: 533px; background-color: green"></div>
</span>
<span >
<div style="width: 400px; height: 533px; background-color: blue"></div>
</span>
<button onclick="plusSlides(-1, 0)">❮</button>
<button onclick="plusSlides(1, 0)">❯</button>
</span>
</span>
</div>
</div>
</div>
</div>
<style>
.blacktitle:hover {
background-color: #555555;
}
.blacktitle {
color: #ffffff;
position: absolute;
background-color: #191919;
height: 70px;
width: 50%;
left: -20px;
top: -45px;
border-radius: 10px;
padding: 21px;
letter-spacing: 6px;
z-index: 10;
}
.transition {
opacity: 0;
transition: opacity 0.5s linear;
}
.grid2 {
display: grid;
gap: 0rem;
grid-template-rows: 1fr;
grid-auto-columns: 1fr;
height: inherit;
justify-content: center;
place-items: center;
overflow: hidden;
}
.active2 {
height: 600px;
}
.pane1 {
background-color: white;
height: 100px;
margin-top: 10px;
margin-bottom: 10px;
border-radius: 20px;
position: relative;
text-align: center;
font-size: 20px;
transition: 0.4s;
}
.container {
padding: 0px 60px 60px 60px;
background-color: #191919;
max-width: 1000px;
min-width: 800px;
width: 100%; }
.flex-container {
display: flex;
justify-content: center;
align-items: top;
flex-direction: column;
margin-top: 60px;
}
.pagebody {
background-color: #191919;
margin: 0;
display: flex;
justify-content: center;
}
.mySlides1 {display: none; overflow: hidden;}
img {vertical-align: middle; max-width: 400px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); border-radius: 5px;}
video {max-width: 400px; box-shadow: 0 2px 4px 0 rgba(0,0,0,.2); border-radius: 5px; margin-top: 40%;}
/* Slideshow container */
.slideshow-container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
width: 400px;
max-width: 400px;
position: relative;
margin: 40px auto auto auto;
}
.videocontainer {
position: relative;
height: 533.333px;
}
/* Next & previous buttons */
.prev, .next {
position: absolute;
top: 50%;
width: auto;
padding: 16px;
margin-top: -22px;
color: white;
font-weight: bold;
font-size: 18px;
transition: 0.6s ease;
border-radius: 0 3px 3px 0;
user-select: none;
background:none;
border:none;
cursor: pointer;
}
/* Position the "next button" to the right */
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
/* On hover, add a grey background color */
.prev:hover, .next:hover {
background-color: #f1f1f1;
color: black;
}
function openUp4(){
var element = document.getElementById("pane4");
element.classList.toggle("active2")
if (element.classList.contains("active2")) {
// document.getElementById("grid2").style.visibility = "visible";
document.getElementById("grid4").style.opacity = 1;
} else {
// document.getElementById("grid2").style.visibility = "hidden";
document.getElementById("grid4").style.opacity = 0;
}
}
let slideIndex = [1,1];
let slideId = ["mySlides1", "mySlides2"]
showSlides(1, 0);
showSlides(1, 1);
function plusSlides(n, no) {
showSlides(slideIndex[no] = n, no);
}
function showSlides(n, no) {
let i;
let x = document.getElementsByClassName(slideId[no]);
if (n > x.length) {slideIndex[no] = 1}
if (n < 1) {slideIndex[no] = x.length}
for (i = 0; i < x.length; i ) {
x[i].style.display = "none";
}
const el = x[slideIndex[no] - 1];
if(el){el.style.display = "block";}
}
}