Merge pull request #14 from babarme/main

add a programm JQuery toggle function
gdscmuet · Oct 19, 2021 · cef4908 · cef4908
2 parents c76a017 + 885d82c
commit cef4908
Show file tree

Hide file tree

Showing 3 changed files with 44 additions and 0 deletions.
diff --git a/JQuery toggle function/index.html b/JQuery toggle function/index.html
@@ -0,0 +1,35 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" href="style.css">
+    <title>Document</title>
+    <!-- <script src="jquery-3.6.0.min.js"></script> -->
+
+<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
+</head>
+<body>
+
+    <button >  hide div 1 </button>
+
+
+<div id="main">
+    <h1> this is div </h1>
+
+</div>
+
+
+<script>
+    $(document).ready(function(){
+$('button').mouseenter(function(){
+$('#main').toggle(1000);
+});
+    });
+
+</script>
+
+
+</body>
+</html>
diff --git a/JQuery toggle function/jquery-3.6.0.min.js b/JQuery toggle function/jquery-3.6.0.min.js
diff --git a/JQuery toggle function/style.css b/JQuery toggle function/style.css
@@ -0,0 +1,7 @@
+#main{
+    background-color: aqua;
+    width: 100%;
+    height: 50vh;
+    text-align: center;
+
+}