Bu yazıda çeşitli core javascript ve kütüphaneler kullanarak div gizleme ve gösterme işlemlerini nasıl yapacağımızı göstereceğim.
Yöntem 1: JavaScript kullanarak bir divin gizlenmesi ve gösterilmesi
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 | <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #ornek { width: 100%; padding: 50px 0; text-align: center; background-color: lightblue; margin-top: 20px; } </style> </head> <body> <button onclick="gizleGoster()">Gizle/Göster</button> <div id="ornek"> Bu örnek bir div elementidir. </div> <script> function gizleGoster() { var x = document.getElementById("ornek"); if (x.style.display === "none") { x.style.display = "block"; } else { x.style.display = "none"; } } </script> </body> </html> |
Yöntem 2: Animasyonlu olarak divi gizleme ve gösterme
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 | <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> #kutu { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all 1s linear; display: block; } .hidden { display: none; } .visuallyhidden { opacity: 0; } #btn { display: block; margin: 0 auto; } </style> </head> <body> <button id="btn">Gizle/Göster</button> <div id="kutu"> Bu örnek bir div elementidir. </div> <script> let box = document.querySelector('#kutu'), btn = document.querySelector('#btn'); btn.addEventListener('click', function () { if (box.classList.contains('hidden')) { box.classList.remove('hidden'); setTimeout(function () { box.classList.remove('visuallyhidden'); }, 20); } else { box.classList.add('visuallyhidden'); box.addEventListener('transitionend', function(e) { box.classList.add('hidden'); }, { capture: false, once: true, passive: false }); } }, false); </script> </body> </html> |
Yöntem 3: Jquery ile div gizleme gösterme
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 | <!DOCTYPE html> <html> <head> <style> #kutu { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all 1s linear; display: block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("#kutu").hide(); }); $("#show").click(function(){ $("#kutu").show(); }); }); </script> </head> <body> <button id="hide">Gizle</button> <button id="show">Göster</button> <div id="kutu"></div> </body> </html> |
Yöntem 4: Jquery kullanarak animasyonlu olarak bir divi gizleme ve gösterme
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 | <!DOCTYPE html> <html> <head> <style> #kutu { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; transition: all 1s linear; display: block; } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script> $(document).ready(function(){ $("#hide").click(function(){ $("#kutu").fadeOut(500); }); $("#show").click(function(){ $("#kutu").fadeIn(500); }); }); </script> </head> <body> <button id="hide">Gizle</button> <button id="show">Göster</button> <div id="kutu"></div> </body> </html> |
Yöntem 5: animation.css kütüphanesini kullanarak gizleme gösterme
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 | <!DOCTYPE html> <html> <head> <style> #kutu { background: goldenrod; width: 300px; height: 300px; margin: 30px auto; } </style> <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css"> </head> <body> <button class="show">Göster</button> <button class="hide">Gizle</button> <div id="kutu" class="animated">Div Gizle</div> <script> var elem = document.querySelector('#kutu'); document.addEventListener('click', function (event) { if (event.target.matches('.show')) { elem.removeAttribute('hidden'); elem.classList.add('fadeInDown'); } if (event.target.matches('.hide')) { elem.setAttribute('hidden', 'true'); elem.classList.remove('fadeInDown'); } }, false); </script> </body> </html> |
Yorum Yap