मान लें कि निम्नलिखित हमारा div है -
<div id="showOrHide"> Welcome in JavaScript </div>
निम्नलिखित हमारा बटन है। क्लिक करने पर, उपरोक्त डिव छिप जाना चाहिए -
<button onclick="showOrHideDiv()">Click The Button</button>
div को छिपाने के लिए JavaScript में style.display अवधारणा का उपयोग करें। निम्नलिखित कोड है -
उदाहरण
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initialscale=1.0">
<title>Document</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
</head>
<body>
<button onclick="showOrHideDiv()">Click The Button</button>
<div id="showOrHide">
Welcome in JavaScript
</div>
<script>
function showOrHideDiv() {
var v = document.getElementById("showOrHide");
if (v.style.display === "none") {
v.style.display = "block";
} else {
v.style.display = "none";
}
}
</script>
</body>
</html> उपरोक्त प्रोग्राम को चलाने के लिए, फ़ाइल का नाम "anyName.html(index.html)" सहेजें और फ़ाइल पर राइट क्लिक करें। वीएस कोड संपादक में "लाइव सर्वर के साथ खोलें" विकल्प चुनें।
आउटपुट
यह निम्नलिखित आउटपुट देगा -
जब उपयोगकर्ता बटन पर क्लिक करता है, तो div छिप जाता है। स्क्रीनशॉट इस प्रकार है -
