Skip to content

Commit 4cd1ec4

Browse files
Jaideep25-techJaideep25-tech
authored
Merge pull request Dezenix#180 from Sulagna-Dutta-Roy/Sulagna
Added responsive faq accordin menu
2 parents ad557c0 + d5fc267 commit 4cd1ec4

File tree

5 files changed

+251
-0
lines changed

5 files changed

+251
-0
lines changed

‎Accordion/Accordion_Menu_03/Readme.md

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
## Awesome Accordion Menu
2+
3+
<h3> Tech Stack Used <img src = "https://media2.giphy.com/media/QssGEmpkyEOhBCb7e1/giphy.gif?cid=ecf05e47a0n3gi1bfqntqmob8g9aid1oyj2wr3ds3mg700bl&rid=giphy.gif" width = 32px> </h3>
4+
<p align="left"> <a href="https://www.w3.org/html/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/html5/html5-original-wordmark.svg" alt="html5" width="40" height="40"/> </a> <a href="https://www.w3schools.com/css/" target="_blank"> <img src="https://raw.githubusercontent.com/devicons/devicon/master/icons/css3/css3-original-wordmark.svg" alt="css3" width="40" height="40"/>
5+
</a><img src="https://img.icons8.com/color/48/000000/javascript--v1.png" height="40" width="40"/></p>
6+
7+
### Preview
8+
9+
10+
![FAQ](https://user-images.githubusercontent.com/72568715/168381251-07b4067a-c23c-4069-8f55-0eaa04987bdc.PNG)

‎Accordion/Accordion_Menu_03/assets/FAQ.PNG

50.1 KB
Loading

‎Accordion/Accordion_Menu_03/code/index.html

Lines changed: 102 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="width=device-width,initial-scale=1">
6+
<title>Responsive FAQ Accordin Menu</title>
7+
<link rel="stylesheet" href="style.css">
8+
</head>
9+
<body>
10+
<div class="container">
11+
<h2>Responsive FAQ Accordin</h2>
12+
<div class="accordins">
13+
<div class="accordin-items">
14+
<button id="accordin-btn1" aria-expanded="false">
15+
<span class="accordion-title">What is the difference between Office 2021 (one-time purchase) and Microsoft 365 (subscription)?</span>
16+
<span class="icon" aria-hidden="true"></span>
17+
</button>
18+
<div class="accordins-contents">
19+
<p>
20+
Microsoft 365 is a subscription that includes the most collaborative,
21+
up-to-date features in one seamless, integrated experience. Microsoft 365
22+
includes the robust Office desktop apps that you're familiar with, like Word,
23+
PowerPoint, and Excel. You also get extra online storage and cloud-connected features that let you
24+
collaborate on files in real time. With a subscription.
25+
</p>
26+
</div>
27+
</div>
28+
<div class="accordin-items">
29+
<button id="accordin-btn1" aria-expanded="false">
30+
<span class="accordion-title">How do I know if my PC or Mac can run Microsoft 365?</span>
31+
<span class="icon" aria-hidden="true"></span>
32+
</button>
33+
<div class="accordins-contents">
34+
<p>
35+
Microsoft 365 is compatible with PC, Mac, Android, and iOS2. See system requirements for compatible versions of your devices, and for other feature requirements.
36+
</p>
37+
</div>
38+
</div>
39+
<div class="accordin-items">
40+
<button id="accordin-btn1" aria-expanded="false">
41+
<span class="accordion-title">Will Microsoft 365 be identical on a PC and a Mac?</span>
42+
<span class="icon" aria-hidden="true"></span>
43+
</button>
44+
<div class="accordins-contents">
45+
<p>
46+
No. Apps are tailored to work best on each operating system. The apps available for Mac
47+
users and the specific features included may be different from those available for PC users.
48+
With Microsoft 365, you can be flexible. With your account, you are not limited to exclusively Mac or exclusively PC, so you can transition across devices.
49+
</p>
50+
</div>
51+
</div>
52+
<div class="accordin-items">
53+
<button id="accordin-btn1" aria-expanded="false">
54+
<span class="accordion-title">Do I keep control of my documents with a Microsoft 365 subscription?</span>
55+
<span class="icon" aria-hidden="true"></span>
56+
</button>
57+
<div class="accordins-contents">
58+
<p>
59+
Yes. Documents that you have created belong fully to you. You can choose to store them online on OneDrive or locally on your PC or Mac.
60+
</p>
61+
</div>
62+
</div>
63+
<div class="accordin-items">
64+
<button id="accordin-btn1" aria-expanded="false">
65+
<span class="accordion-title">Is Internet access required for Microsoft 365?</span>
66+
<span class="icon" aria-hidden="true"></span>
67+
</button>
68+
<div class="accordins-contents">
69+
<p>
70+
Internet access is required to install and activate all the latest releases of apps and services included in all Microsoft 365 subscription plans. Note that if you are an existing subscriber, you do not need to reinstall or purchase another subscription.
71+
</p>
72+
</div>
73+
</div>
74+
<div class="accordin-items">
75+
<button id="accordin-btn1" aria-expanded="false">
76+
<span class="accordion-title">How many people can use a Microsoft 365 subscription?</span>
77+
<span class="icon" aria-hidden="true"></span>
78+
</button>
79+
<div class="accordins-contents">
80+
<p>
81+
You can share Microsoft 365 Family with 5 other people in your household, for a total of 6 users. Microsoft 365 Personal can be used by one person.
82+
</p>
83+
</div>
84+
</div>
85+
<div class="accordin-items">
86+
<button id="accordin-btn1" aria-expanded="false">
87+
<span class="accordion-title">How do I share my subscription benefits with members of my family?</span>
88+
<span class="icon" aria-hidden="true"></span>
89+
</button>
90+
<div class="accordins-contents">
91+
<p>
92+
If you have an active Microsoft 365 Family subscription, you can share it with up to 5 members
93+
of your household. Each household member you share your subscription with can install Microsoft
94+
365 on all their devices and sign in to five devices at the same time.
95+
</p>
96+
</div>
97+
</div>
98+
</div>
99+
</div>
100+
<script src="script.js"></script>
101+
</body>
102+
</html>

‎Accordion/Accordion_Menu_03/code/script.js

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
const items = document.querySelectorAll(".accordins button");
2+
3+
4+
function toggles() {
5+
const itemstoggle = this.getAttribute("aria-expanded");
6+
7+
for (i=0; i<items.length; i++) {
8+
items[i].setAttribute("aria-expanded","false");
9+
}
10+
11+
if(itemstoggle == "false") {
12+
this.setAttribute("aria-expanded","true");
13+
}
14+
}
15+
16+
items.forEach((item) => item.addEventListener("click", toggles));

‎Accordion/Accordion_Menu_03/code/style.css

Lines changed: 123 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,123 @@
1+
@import url('https://fonts.googleapis.com/css?family=Montserrat:300,400&display=swap');
2+
3+
* {
4+
box-sizing: border-box;
5+
}
6+
*::before, *::after {
7+
box-sizing: border-box;
8+
}
9+
10+
body {
11+
margin: 0;
12+
padding: 0;
13+
font-family: 'Montserrat', sans-serif;
14+
color: #2a2a2a;
15+
display: flex;
16+
min-height: 100vh;
17+
background: rgb(255, 253, 253);
18+
}
19+
20+
.container {
21+
margin: 0 auto;
22+
padding: 4rem;
23+
width: 48rem;
24+
}
25+
h2 {
26+
margin-left: 50px;
27+
}
28+
29+
.accordins .accordin-items {
30+
border-bottom: 1px solid #e5e5e5;
31+
}
32+
33+
.accordins .accordin-items button[aria-expanded='true'] {
34+
border-bottom: 1px solid #2a2a2a;
35+
}
36+
37+
.accordins button {
38+
position: relative;
39+
display: block;
40+
text-align: left;
41+
width: 100%;
42+
padding: 1em 0;
43+
color: #2a2a2a;
44+
font-size: 1.15rem;
45+
font-weight: 400;
46+
border: none;
47+
background: none;
48+
outline: none;
49+
}
50+
51+
.accordins button:hover,
52+
.accordins button:focus {
53+
cursor: pointer;
54+
color: grey;
55+
}
56+
57+
.accordins button:hover::after,
58+
.accordins button:focus::after {
59+
cursor: pointer;
60+
color: grey;
61+
border: 1px solid grey;
62+
}
63+
64+
.accordins button .accordion-title {
65+
padding: 1em 1.5em 1em 0;
66+
}
67+
68+
.accordins button .icon {
69+
display: inline-block;
70+
position: absolute;
71+
top: 18px;
72+
right: 0;
73+
width: 22px;
74+
height: 22px;
75+
border: 1px solid;
76+
border-radius: 22px;
77+
}
78+
79+
.accordins button .icon::before {
80+
display: block;
81+
position: absolute;
82+
content: '';
83+
top: 9px;
84+
left: 5px;
85+
width: 10px;
86+
height: 2px;
87+
background: currentColor;
88+
}
89+
.accordins button .icon::after {
90+
display: block;
91+
position: absolute;
92+
content: '';
93+
top: 5px;
94+
left: 9px;
95+
width: 2px;
96+
height: 10px;
97+
background: currentColor;
98+
}
99+
100+
.accordins button[aria-expanded='true'] {
101+
color: #2a2a2a;
102+
}
103+
.accordins button[aria-expanded='true'] .icon::after {
104+
width: 0;
105+
}
106+
.accordins button[aria-expanded='true'] + .accordins-contents {
107+
opacity: 1;
108+
max-height: 9em;
109+
transition: all 200ms linear;
110+
will-change: opacity, max-height;
111+
}
112+
.accordins .accordins-contents {
113+
opacity: 0;
114+
max-height: 0;
115+
overflow: hidden;
116+
transition: opacity 200ms linear, max-height 200ms linear;
117+
will-change: opacity, max-height;
118+
}
119+
.accordins .accordins-contents p {
120+
font-size: 1rem;
121+
font-weight: 300;
122+
margin: 2em 0;
123+
}

0 commit comments

Comments
 (0)