I am trying to create an accordion, yet I only managed to get the first collapsible button to work properly while the other collapsible buttons not only don't work - they also don't show up at all .
When I delete the css for the "content" variable , all the content shows properly, yet the "day" buttons are unclickable (dont do what theyre supposed to)
I have tried a few codes and not knowing JS very well, I copied the JS code from a W3Schools page (while of course making the components myself) and thence I struggle to understand how they work and how I can fix it.
var acc = document.getElementsByClassName("daytitle");
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";
}
});
}
/*
I ALSO TRIED:
for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
} */
/*for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
} );
}
*/.daytitle {
width: 100%;
height: 50px;
background-color: #c2c2d6;
border-color: black;
margin-left: 10px;
margin-top: 0px;
font-size: 30px;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-weight: 400;
color: black;
}
.daytitle:hover {
background-color: #555;
}
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<button class="daytitle"> Day <i class="arrow"></i></button>
<div class="content">
<div id="Attraction1" class="attraction">
<div class="atr_image"><img src="images/oldtown.jpg" alt=""></div>
<div class="atr_container">
<div class="atr_name"><a>Atr Name </a></div>
<div class="atr_region">Atr Region</div>
<div class="atr_desc">
<p>Atr Description</p>
</div>
<div class="atr_time_container">
<div class="atr_time">
<p>3 Hours</p>
</div>
<span class="dot"></span>
<div class="atr_hours">
<p>10:00-13:00</p>
</div>
</div>
<button class="button1" id="R1 " onclick="Remove(this.closest('.attraction'))">Remove Attraction</button>
</div>
</div>
</div>I also tried using the Bootstrap library and deleting the js code, but this doesnt work either. Unlike the first option, in which it only shows the first button and the first component - here it shows all the components open - yet no "day" button seems to be clickable.
<button class = "daytitle" data-toggle="collapse" data-target="<?php echo "#.content.$l_daynumber" ?>" > <?php echo "Day ". $l_daynumber; ?><i class="arrow"></i></button>
<div id = "<?php echo "content.$l_daynumber" ?>" class = "content">
Full code with php:
for($u = 0; $u < count($arr);$u++){
$hour = intval($arr[$u]["Time"]);
$time = $time + $hour;
if($l_daynumber < $maxdays)
if($time > 8|| $first_time == 0|| $early_atrtype === 1){
$l_daynumber++;
$first_time = 1;
$time = 0;
$this_hour = 10;
$early_atrtype = 0;
$atr_in_day = 0;
?>
<html>
<button class = "daytitle" data-toggle="collapse" data-target="<?php echo "#.content.$l_daynumber" ?>" > <?php echo "Day ". $l_daynumber; ?><i class="arrow"></i></button>
<div id = "<?php echo "content.$l_daynumber" ?>" class = "content">
</html>
<?php
}
$name = $arr[$u]["Name"];
//$region = $arr[$u]["Region"];
$desc1 = $arr[$u]["Desc"];
$hours = $hour . " Hours";
$nexthour = $this_hour + $hour;
$actual= "$this_hour : 00 - $nexthour: 00";
if(similar_text($arr[$u]["Atrtype"],"157") > 0 && $nexthour > 19){
$early_atrtype = 1;
}
$this_hour = $nexthour;
if($this_hour > 24){
$this_hour = $this_hour - 24;
}
$numofatr++;
$atr_in_day++;
?>
<html>
<div id = "<?php echo "Attraction.R.$numofatr" ; ?>" class = "attraction">
<div class = "atr_image"><img src="images/oldtown.jpg" alt=""></div>
<div class= "atr_container">
<div class = "atr_name"><a><?php echo $name; ?> </a></div>
<div class = "atr_region"><p><?php echo $region;?> </p> </div>
<div class = "atr_desc"><p><?php echo $desc1; ?></p></div>
<div class = "atr_time_container">
<div class = "atr_time"><p><?php echo $hours; ?> </p></div>
<span class= "dot" ></span>
<div class = "atr_hours"><p><?php echo $actual; ?></p></div>
</div>
<button class="button1" id = "<?php echo "R. $numofatr"?> " onclick = "Remove(this.closest('.attraction'))">Remove Attraction</button>
<script>
function Remove(elem){
//var Attraction = document.getElementById("Attraction"+elem);
// Attraction.remove();
// document.getElementById(Attraction).parentNode.removeChild( document.getElementById(Attraction))
elem. remove();
}
</script>
</div>
</div>
<?php
if($time > 8){
?>
</div>
<?php
}
?>
<style>
.content {
}
</style>
<script>
/*for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.maxHeight){
content.style.maxHeight = null;
} else {
content.style.maxHeight = content.scrollHeight + "px";
}
} );
}
*/
/*var acc = document.getElementsByClassName("daytitle");
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";
}
});
}
*/
/*for (i = 0; i < coll.length; i++) {
coll[i].addEventListener("click", function() {
this.classList.toggle("active");
var content = this.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
} */
</script>
</html>
Note 1: I am using PHP values to construct the components that make up the "content" class, but didn't include the PHP code here.
Note 2: I am still new to the community and to web development and I don't know jQuery or advanced CSS at all and only know basic JS. If there are easier solutions involving them I will try to implement them anyway.
Note 3: the time variable works fine and I don't think the problem lies here
I would appreciate help. Thank you.
Well, you could do:
var acc = document.getElementsByClassName("daytitle");
var i;
var x = document.getElementById("content1");
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";
}
if (x.style.display === "none") {
x.style.display = "block";
}
});
}
function collapse() {
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}.daytitle {
width: 100%;
height: 50px;
background-color: #c2c2d6;
border-color: black;
margin-left: 10px;
margin-top: 0px;
font-size: 30px;
text-align: center;
font-family: 'Oswald', sans-serif;
font-size: 30px;
font-weight: 400;
color: black;
}
.daytitle:hover {
background-color: #555;
}
.content {
padding: 0 18px;
background-color: white;
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}<button class="daytitle"> Day <i class="arrow"></i></button>
<div id="content1" class="content">
<div id="Attraction1" class="attraction">
<div class="atr_image"><img src="images/oldtown.jpg" alt=""></div>
<div class="atr_container">
<div class="atr_name"><a>Atr Name </a></div>
<div class="atr_region">Atr Region</div>
<div class="atr_desc">
<p>Atr Description</p>
</div>
<div class="atr_time_container">
<div class="atr_time">
<p>3 Hours</p>
</div>
<span class="dot"></span>
<div class="atr_hours">
<p>10:00-13:00</p>
</div>
</div>
<button class="button1" id="R1" onclick="collapse()">Remove Attraction</button>
</div>
</div>
</div>but the only problem with this answer is that after you collapse the content, to bring it back up you will have to double click the day button, other than that it should work.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments