├── f.js ├── index.html └── style.css /f.js: -------------------------------------------------------------------------------- 1 | const accor=document.querySelectorAll(".accordion-item-header"); 2 | accor.forEach(accor =>{ 3 | accor.addEventListener("click",event =>{ 4 | accor.classList.toggle("active"); 5 | const accorbody=accor.nextElementSibling; 6 | if(accor.classList.contains("active")){ 7 | accorbody.style.maxHeight=accorbody.scrollHeight + "px"; 8 | } 9 | else{ 10 | accorbody.style.maxHeight=0; 11 | } 12 | }); 13 | }); 14 | 15 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Document 8 | 9 | 10 | 11 |

FAQ

12 |
13 |
14 |
15 | what is web development ? 16 |
17 |
18 |
19 | Web development is the building and maintenance of websites; it's the work that happens behind the scenes to make a website look great,
work fast and perform well with a seamless user experience.
Web developers, or 'devs', do this by using a variety of coding languages 20 |
21 |
22 |
23 | 24 |
25 |
26 | what is JAVASCRIPT ? 27 |
28 |
29 |
30 | Javascript (JS) is a scripting languages, primarily used on the Web. It is used to enhance HTML pages and is commonly
found embedded in HTML code. JavaScript is an interpreted language. Thus, it doesn't need to be compiled. JavaScript renders web pages in an interactive
and dynamic fashion. This allowing the pages to react to events, exhibit special effects,
accept variable text, validate data, create cookies, detect a user’s browser, etc. 31 |
32 |
33 |
34 | 35 |
36 |
37 | what is web HTML ? 38 |
39 |
40 |
41 | The HyperText Markup Language, or HTML is the standard markup language for documents designed to be displayed in a web browser. It can be assisted by technologies such as Cascading Style Sheets (CSS) and scripting languages such as JavaScript. 42 | 43 | Web browsers receive HTML documents from a web server or from local storage and render the documents into multimedia web pages. HTML describes the structure of a web page semantically and originally included cues for the appearance of the document. 44 |
45 |
46 |
47 |
48 | 49 | 50 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | body{ 7 | font-family: 'Courier New', Courier, monospace; 8 | background-color: #34495e; 9 | color: #fff; 10 | } 11 | h1{ 12 | text-align: center; 13 | margin: 2rem 0; 14 | font-size: 2.5rem; 15 | } 16 | .accordion{ 17 | width: 90%; 18 | max-width: 1000px; 19 | margin: 2rem auto; 20 | } 21 | .accordion-item{ 22 | background-color:#fff ; 23 | color: #000; 24 | margin: 1rem 0; 25 | border-radius: 0.5rem; 26 | box-shadow: 0 4px 8px 0 rgba(0,0,0,0.5); 27 | } 28 | .accordion-item-header{ 29 | padding: 0.5rem 3rem 0.5rem 1rem; 30 | min-height: 3.5rem; 31 | line-height: 1.25rem; 32 | font-weight: bold; 33 | display: flex; 34 | align-items: center; 35 | position: relative; 36 | cursor: pointer; 37 | } 38 | .accordion-item-header::after{ 39 | content: "+"; 40 | font-size: 2rem; 41 | position: absolute; 42 | right: 1rem; 43 | } 44 | .accordion-item-header.active::after{ 45 | content:"-"; 46 | } 47 | .accordion-item-body { 48 | max-height: 0; 49 | overflow: hidden; 50 | transition: max-height 0.2s ease-out; 51 | } 52 | .accordion-item-body-content { 53 | padding: 1rem; 54 | line-height: 1.5rem; 55 | border-top: 1px solid #34495e; 56 | border-image: linear-gradient(to right, transparent, #34495e, transparent) 1; 57 | } 58 | 59 | --------------------------------------------------------------------------------