Skip to content

Commit 75c2188

Browse files
author
guldus98
committed
html, css and js
1 parent 44cf303 commit 75c2188

File tree

3 files changed

+133
-0
lines changed

3 files changed

+133
-0
lines changed

‎Accordion Menu 6/Accordion Menu 6.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
@import url('https://fonts.googleapis.com/css?family=Ubuntu');
2+
body {
3+
padding: 0;
4+
margin: 0;
5+
display: flex;
6+
height: 100vh;
7+
justify-content: center;
8+
align-items: center;
9+
background: #eee;
10+
font-family: 'Ubuntu', sans-serif;
11+
}
12+
h2{
13+
text-align: center;
14+
font-weight: bold;
15+
}
16+
.wrapper{
17+
max-width: 500px;
18+
height: auto;
19+
}
20+
.wrap_title {
21+
width: 500px;
22+
height: 45px;
23+
line-height: 45px;
24+
border-radius: 30px 30px 0px 0px;
25+
text-align: center;
26+
background: #262626;
27+
color: #eee;
28+
font-weight: bold;
29+
cursor: pointer;
30+
}
31+
.wrap-text {
32+
padding: 10px 20px;
33+
border: 2px solid #262626;
34+
color: #262626;
35+
max-height: 0;
36+
opacity: 0;
37+
transition: .5s;
38+
}
39+
.wrap-text p{
40+
transform: scale(0);
41+
transition: .5s;
42+
}
43+
.wrap.active .wrap-text {
44+
max-height: 200px;
45+
opacity: 1;
46+
margin-bottom: 20px;
47+
transition: .5s;
48+
}
49+
.wrap.active > .wrap-text > p {
50+
transform: scale(1);
51+
}

‎Accordion Menu 6/Accordion Menu 6.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
3+
<html>
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>page</title>
7+
<link rel="stylesheet" type="text/css" href="Accordion Menu 6.css">
8+
<meta name="viewport" content="width=device-width, initial-scale=1">
9+
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css">
10+
</head>
11+
<body>
12+
13+
<div class="wrapper">
14+
<h2>Accordion Menu</h2>
15+
16+
<!-- wrap 1 -->
17+
<div class="wrap">
18+
<div class="wrap_title">WRAP ONE</div>
19+
<div class="wrap-text">
20+
<p>
21+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
22+
Mollitia autem quasi inventore unde nobis voluptatibus
23+
illum quae rerum laudantium minima, excepturi quis maiores.
24+
Eaque quae, nam delectus explicabo, deserunt ipsum!
25+
</p>
26+
</div>
27+
</div>
28+
29+
<!-- wrap 2 -->
30+
<div class="wrap">
31+
<div class="wrap_title">WRAP TWO</div>
32+
<div class="wrap-text">
33+
<p>
34+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
35+
Mollitia autem quasi inventore unde nobis voluptatibus
36+
illum quae rerum laudantium minima, excepturi quis maiores.
37+
Eaque quae, nam delectus explicabo, deserunt ipsum!
38+
</p>
39+
</div>
40+
</div>
41+
42+
<!-- wrap 3 -->
43+
<div class="wrap">
44+
<div class="wrap_title">WRAP THREE</div>
45+
<div class="wrap-text">
46+
<p>
47+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
48+
Mollitia autem quasi inventore unde nobis voluptatibus
49+
illum quae rerum laudantium minima, excepturi quis maiores.
50+
Eaque quae, nam delectus explicabo, deserunt ipsum!
51+
</p>
52+
</div>
53+
</div>
54+
55+
<!-- wrap 4 -->
56+
<div class="wrap">
57+
<div class="wrap_title">WRAP FOUR</div>
58+
<div class="wrap-text">
59+
<p>
60+
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
61+
Mollitia autem quasi inventore unde nobis voluptatibus
62+
illum quae rerum laudantium minima, excepturi quis maiores.
63+
Eaque quae, nam delectus explicabo, deserunt ipsum!
64+
</p>
65+
</div>
66+
</div>
67+
68+
</div>
69+
70+
71+
<script>
72+
73+
let wrap = document.querySelectorAll(".wrap");
74+
75+
wrap.forEach((x) => x.addEventListener("click", function () {
76+
this.classList.toggle("active");
77+
}))
78+
79+
</script>
80+
81+
</body>
82+
</html>

‎Accordion Menu 6/Accordion Menu 6.png‎

32.5 KB
Loading

0 commit comments

Comments
 (0)