Making Div Visible or Invisible Depend on Condition

making div visible or invisible depend on condition

try The following code

<input type="checkbox" ng-model="chkCondition">
<div class="ddown" ng-show="chkCondition">
    <button class="dbtn">ABC</button>
</div>

<!DOCTYPE html><html><script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"></script><body>
<div ng-app="">    Check to show/Hide a div:    <input type="checkbox" ng-model="chkCondition"><div class="ddown" ng-show="chkCondition">    <button class="dbtn">ABC</button></div>  </body></html>

How to make a DIV visible and invisible with JavaScript?

if [DIV] is an element then

[DIV].style.visibility='visible'

[DIV].style.visibility='hidden'

How to hide a div element depending on Model value? MVC

The below code should apply different CSS classes based on your Model's CanEdit Property value .

<div class="@(Model.CanEdit?"visible-item":"hidden-item")">Some links</div>

But if it is something important like Edit/Delete links, you shouldn't be simply hiding,because people can update the css class/HTML markup in their browser and get access to your important link. Instead you should be simply not Rendering the important stuff to the browser.

@if(Model.CanEdit)
{
  <div>Edit/Delete link goes here</div>
}

Making an element visible and hide upon click

Try to toggle the visibility property based on current value of it,

function showMask() {
    var node = document.getElementById('mask123')
    var visibility = node.style.visibility;
    node.style.visibility = visibility == "visible" ? 'hidden' : "visible"
}

You are accessing the jquery's is() function over a plain node object. Node object doesn't have function called is in its prototype.

How to conditionally show an element, keeping its occupied space?

See MDN - CSS visibility,

The visibility CSS property can show or hide an element without affecting the layout of a document (i.e., space is created for elements regardless of whether they are visible or not)

So, use Vue's dynamic style to bind your expression to CSS visibility.

new Vue({
  el: "#app",
  data: {
    visible: true
  },
  mounted() {
    setInterval(() => this.visible = !this.visible, 1000)
  }
})

#app {
  display: grid;
  grid-template-columns: auto auto auto;
}

#app div {
  border-style: solid;
  border-width: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="app">
  <div>one</div>
  <div :style="{visibility: visible ? 'visible' : 'hidden'}">two</div>
  <div>three</div>
  {{visible}}
</div>

How to change the visibility of a div tag using javascript in the same page?

Using the `visibility` attribute:

Show the div with id="yourID":

document.getElementById("yourID").style.visibility = "visible";

To hide it:

document.getElementById("main").style.visibility = "hidden";

Using the `display` attribute:

Show:

document.getElementById("yourID").style.display= "block";

Hide:

document.getElementById("yourID").style.display= "none";

Show/hide 'div' using JavaScript

How to show or hide an element:

In order to show or hide an element, manipulate the element's style property. In most cases, you probably just want to change the element's display property:

element.style.display = 'none';           // Hide
element.style.display = 'block';          // Show
element.style.display = 'inline';         // Show
element.style.display = 'inline-block';   // Show

Alternatively, if you would still like the element to occupy space (like if you were to hide a table cell), you could change the element's visibility property instead:

element.style.visibility = 'hidden';      // Hide
element.style.visibility = 'visible';     // Show

Hiding a collection of elements:

If you want to hide a collection of elements, just iterate over each element and change the element's display to none:

function hide (elements) {
  elements = elements.length ? elements : [elements];
  for (var index = 0; index < elements.length; index++) {
    elements[index].style.display = 'none';
  }
}

// Usage:
hide(document.querySelectorAll('.target'));
hide(document.querySelector('.target'));
hide(document.getElementById('target'));

hide(document.querySelectorAll('.target'));
function hide (elements) {  elements = elements.length ? elements : [elements];  for (var index = 0; index < elements.length; index++) {    elements[index].style.display = 'none';  }}

<div class="target">This div will be hidden.</div>
<span class="target">This span will be hidden as well.</span>

Javascript: Hide element if condition is met

You can use the code below, you want to get an attribute and not the value.

You can use querySelector instead of getElementById if you want.

var role = document.querySelector('#role');
if(role.getAttribute('value') == 'Edit'){    role.style.display = 'none';}

<!DOCTYPE html><html>    <!-- HTML -->    <body>        <div id="role" value="Edit">            <button> Edit </button>        </div>    </body></html>

finding if a particular div is invisible (visible = false) using javascript

There isn't a visible property, but visibility, and it can have the following values:

visible
hidden
collapse

See the MDN article.

Making Div Visible or Invisible Depend on Condition