-
Notifications
You must be signed in to change notification settings - Fork 0
/
accordion.html
132 lines (117 loc) · 5.03 KB
/
accordion.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="keywords" content="HTML, CSS, JavaScript, jQuery">
<meta name="author" content="Hassan Ashfaq Bhatti">
<title>Accordion Using CSS JavaScript and HTML</title>
<style>
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300&display=swap');
body {
background-color: black;
font-family: 'rubik', sans-serif;
}
h1 {
text-align: center;
margin: 40px 0;
}
.accordion {
width: auto;
margin: 90px auto;
color: black;
background-color: gold;
padding: 45px 45px;
}
.accordion .container {
position: relative;
margin: 10px 10px;
}
.accordion .label {
position: relative;
padding: 10px 0;
font-size: 30px;
color: black;
cursor: pointer;
}
.accordion .label::before {
content: '+';
color: black;
position: absolute;
top: 50%;
right: -5px;
font-size: 30px;
transform: translateY(-50%);
}
.accordion .content {
position: relative;
background: gold;
height: 0;
font-size: 20px;
text-align: justify;
width: auto;
overflow: hidden;
transition: 0.5s;
}
.accordion hr {
width: 100;
margin-left: 0;
border: 1px solid grey;
}
.accordion .container.active .content {
height: auto;
}
.accordion .container.active .label::before {
content: '-';
font-size: 30px;
}
</style>
</head>
<body>
<div class="accordion-body">
<div class="accordion">
<h1>Frequently Asked Questions</h1>
<hr>
<div class="container">
<div class="label">What is HTML</div>
<div class="content">Hypertext Markup Language (HTML) is a computer language that makes up most web pages and online applications. A hypertext is a text that is used to reference other pieces of text, while a markup language is a series of markings that tells web servers the style and structure of a document. HTML is very simple to learn and use.</div>
</div>
<hr>
<div class="container">
<div class="label">What is CSS?</div>
<div class="content">CSS stands for Cascading Style Sheets. It is the language for describing the presentation of Web pages, including colours, layout, and fonts, thus making our web pages presentable to the users. CSS is designed to make style sheets for the web. It is independent of HTML and can be used with any XML-based markup language. CSS is popularly called the design language of the web.
</div>
</div>
<hr>
<div class="container">
<div class="label">What is <br>JavaScript ?</div>
<div class="content">JavaScript is a scripting or programming language that allows you to implement complex features on web pages — every time a web page does more than just sit there and display static information for you to look at — displaying timely content updates, interactive maps, animated 2D/3D graphics, scrolling video jukeboxes, etc. — you can bet that JavaScript is probably involved. It is the third of the web trio.</div>
</div>
<hr>
<div class="container">
<div class="label">What is React?</div>
<div class="content">React is a JavaScript library created for building fast and interactive user interfaces for web and mobile applications. It is an open-source, component-based, front-end library responsible only for the application’s view layer. In Model View Controller (MVC) architecture, the view layer is responsible for how the app looks and feels. React was created by Jordan Walke, a software engineer at Facebook. </div>
</div>
<hr>
<div class="container">
<div class="label">What is PHP?</div>
<div class="content">PHP is a server-side and general-purpose scripting language that is especially suited for web development. PHP originally stood for Personal Home Page. However, now, it stands for Hypertext Preprocessor. It’s a recursive acronym because the first word itself is also an acronym.</div>
</div>
<hr>
<div class="container">
<div class="label">What is Node JS?</div>
<div class="content">Node.js is an open-source, cross-platform, back-end JavaScript runtime environment that runs on the V8 engine and executes JavaScript code outside a web browser. Node.js lets developers use JavaScript to write command line tools and for server-side scripting—running scripts server-side to produce dynamic web page content before the page is sent to the user's web browser. Consequently, Node.js represents a "JavaScript everywhere" paradigm</div>
</div>
<hr>
</div>
</div>
<script type="text/javascript">
const accordion = document.getElementsByClassName('container');
for (i = 0; i < accordion.length; i++) {
accordion[i].addEventListener('click', function() {
this.classList.toggle('active')
})
}
</script>
</body>
</html>