I’m trying to make an accordian menu (I’m a massive noob at HTML, CSS and JS as you can probably tell).
My main goal is to make the “+ Work” and “+ Social” buttons change to “- Work” and “- Social” respectively when active.
I tried using the ::before
selector and I just can’t get it to work.
When I write .active::before {content: "- "; }
it appends “- ” to the links within the accordian panel which I don’t want.
Please help!!
P.S I’m trying to copy this into a cargo website and for whatever reason it’s really temperamental so if anyone has advice/experience with this please let me know!
JavaScript
x
106
106
1
<!DOCTYPE html>
2
<html>
3
<head>
4
<meta name="viewport" content="width=device-width, initial-scale=1">
5
<style>
6
7
a {
8
color: rgba(0, 0, 0, 0.6);
9
font-size: 1rem;
10
font-weight: 400;
11
font-family: "Neue Haas Grotesk", Icons;
12
text-decoration: none;
13
}
14
15
a:visited {
16
color: rgba(0, 0, 0, 0.6);
17
text-decoration: none;
18
}
19
20
a:hover {
21
color: #225a25;
22
text-decoration: none;
23
}
24
25
26
/*Accordian menu buttons*/
27
.accordion {
28
background-color: rgba(0, 0, 0, 0);
29
color: rgba(0, 0, 0, 0.6);
30
cursor: pointer;
31
padding: 0px;
32
width: 100%;
33
border: none;
34
text-align: left;
35
outline: none;
36
font-size: 1rem;
37
font-weight: 400;
38
font-family: "Neue Haas Grotesk", Icons;
39
text-decoration: none;
40
transition: 0.2s;
41
}
42
43
/*Change button prefix from + to - upon clicking*/
44
.accordion::before {
45
content: "+ ";
46
}
47
48
.accordian:active::before {
49
content: "- ";
50
}
51
.active {
52
text-decoration: underline;
53
}
54
55
56
57
.accordion:hover {
58
color: #225a25;
59
}
60
61
62
/*Accodian panel style*/
63
.panel {
64
padding: 2px 16px 16px;
65
display: none;
66
background-color: rgba(0, 0, 0, 0);
67
overflow: hidden;
68
}
69
70
</style>
71
72
<button class="accordion"> Work</button>
73
<div class="panel" style="display: none;">
74
<a href="Freelance-Work" rel="history">︎ Freelance</a><br>
75
<a href="university-work" rel="history" data-tags="university-work">︎ University</a><br>
76
<a href="Personal-projects" rel="history">︎ Personal</a>
77
</div>
78
79
<button class="accordion"> Social</button>
80
<div class="panel" style="display: none;">
81
<a href="https://www.linkedin.com/in/andy-connacher-2a7867a8/" target="_blank">︎ LinkedIn</a><br>
82
<a href="https://www.instagram.com/andyconnach3r/" target="_blank">︎ Instagram</a><br>
83
<a href="https://www.upwork.com/freelancers/~019da1b6edbddef1f1" target="_blank">︎ Upwork</a>
84
85
86
</div>
87
88
<script>
89
var acc = document.getElementsByClassName("accordion");
90
var i;
91
92
for (i = 0; i < acc.length; i++) {
93
acc[i].addEventListener("click", function() {
94
this.classList.toggle("active");
95
var panel = this.nextElementSibling;
96
if (panel.style.display === "block") {
97
panel.style.display = "none";
98
} else {
99
panel.style.display = "block";
100
}
101
});
102
}
103
</script>
104
105
</body>
106
</html>
Advertisement
Answer
To select the active
class you use .
not :
Change
JavaScript
1
4
1
.accordian:active::before {
2
content: "- ";
3
}
4
To
JavaScript
1
4
1
.accordion.active::before {
2
content: "- ";
3
}
4