Accordion Menu 1

guldus98 · guldus98 · commit 4a8933329010 · 2019-02-22T15:09:50.000+03:00
diff --git a/accordion menu 1/accordion menu 1.css b/accordion menu 1/accordion menu 1.css
@@ -0,0 +1,47 @@
+﻿body{
+    padding: 0;
+    margin: 0;
+    background: #fff;
+}
+.container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 600px;
+    height: auto;
+    transform: translate(-50%,-50%);
+    transition: .5s;
+}
+h2{
+    text-align:center;
+    font-family: arial;
+    font-weight: bolder;
+}
+.accordion {
+    text-align: left;
+    outline: none;
+    padding: 20px;
+    width: 100%;
+    border: none;
+    font-family: Verdana, sans-serif;
+    font-weight: bold;
+    font-size: 18px;
+    color: #ccc;
+    background: #1a1a1a;
+    box-shadow: 0px 0px 20px #262626;
+    border: 2px solid #ccc;
+    transition: .4s;
+}
+#box{
+    padding: 5px 20px;
+    background: rgba(255, 255, 255, 0.1);
+    color: #262626;
+    font-family: Arial;
+    overflow: hidden;
+    display: none;
+}
+.active{
+    background: #ccc;
+    color: #262626;
+    transition: .5s;
+}
diff --git a/accordion menu 1/accordion menu 1.html b/accordion menu 1/accordion menu 1.html
@@ -0,0 +1,73 @@
+﻿<!DOCTYPE html>
+
+<html>
+<head>
+    <meta charset="utf-8" />
+    <title>page</title>
+    <link rel="stylesheet" type="text/css" href="accordion menu 1.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
+    <style>
+    </style>
+</head>
+<body>
+
+
+    <div class="container">
+        <h2>WEB LANGUAGES</h2>
+        <button class="accordion">HTML</button>
+        <div id="box">
+            <p>
+                Hypertext Markup Language is the standard text markup
+                language used to create web pages. The last version of the
+                language is HTML5. HTML cannot be defined as a programming language.
+                Because a program that works on its own with HTML code can not be written.
+            </p>
+        </div>
+
+        <button class="accordion">CSS</button>
+        <div id="box">
+            <p>
+                Cascading Style Sheets is a Web technology that offers additional
+                possibilities for formatting text and formats in addition to HTML.
+            </p>
+        </div>
+
+        <button class="accordion">JavaScript</button>
+        <div id="box">
+            <p>
+                JavaScript® (usually abbreviated as js) is an object-oriented programming
+                language that is simply interpreted and blended with first-class functions.
+                It is commonly known as a scripting language for web pages, but is often
+                used in non-browser environments such as node.js or Apache CouchDB. Having
+                a prototype-based and multi-paradigm language provides a dynamic and
+                functional structure. Learn more about JavaScript.
+            </p>
+        </div>
+    </div>
+
+
+
+    <script>
+
+        let acordion = document.getElementsByClassName("accordion");
+        
+
+        for (let i = 0; i < acordion.length; i++) {
+            acordion[i].addEventListener("click", function () {
+                this.classList.toggle("active");
+                let box = this.nextElementSibling;
+                if (box.style.display === "none") {
+                    box.style.display = "block";
+                }
+                else {
+                    box.style.display = "none"
+                }
+            })
+        };
+
+
+    </script>
+
+</body>
+</html>
diff --git a/accordion menu 1/accordion menu 1.png b/accordion menu 1/accordion menu 1.png
