How to show hide or toggle elements in Angular
Show/Hide or Toggle Element using JavaScript
The JavaScript method is very simple. I have a SELECT dropdown list on my web page and a DIV element that has two textboxes. In this method, I am using the display property of the <div> element to show or hide the element. The CSS display property specifies the display behavior of an element.
<html>
<body>
<p>JavaScript Example: Select an option from the dropdown list to "toggle" the DIV element!</p>
<p>
<select id="sel" onchange="toggle()">
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</p>
<div id="cont"
style="display:block;
border:solid 1px #CCC;padding:10px;">
Name: <input type="text" id="name" />
Age: <input type="text" id="age" />
</div>
</body>
<script>
function toggle() {
var cont = document.getElementById('cont');
if (cont.style.display == 'block') {
cont.style.display = 'none';
}
else {
cont.style.display = 'block';
}
}
</script>
</html>When I select an option from the dropdown list, it calls the function toggle(). It then gets the id of the <div> element and checks the display property of it.
if (cont.style.display == 'block') {
So, if the property is 'block' (means show) then set the property as 'none', or else, again set it to 'block'.
Show/Hide or Toggle Element using jQuery
The jQuery method of doing this is very straight. You don’t have to do much. You can simply use an in-build jQuery method called toggle() to show/hide any element.
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p>jQuery Example: Select an option from the dropdown list to "toggle" the DIV element!</p>
<p>
<select>
<option value="1" selected>Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</p>
<div id="cont"
style="border:solid 1px #CCC;padding:10px;">
Name: <input type="text" id="name" />
Age: <input type="text" id="age" />
</div>
</body>
<script>
$(document).ready(function () {
$("select").change(function () {
$("div").toggle();
// Do you know: you can pass a paramter to the toggle() method,
// such as "slow", "fast" or a value in millisecond.
});
});
</script>
</html>If you have noticed, I have "not" set the "display" property of the <div> element at design time (which I did in my first example) and yet it toggles the element, as we want it to. You "don’t" have to worry about writing any conditions or check the element’s display property etc. The toggle() method toggles between show() and hide() methods of an element. You can attach this method with any element such as the <p> or <span> etc.
The toggle() checks the visibility property of the element and accordingly uses the "show()" and "hide()" methods to create a toggle effect.
The toggle() method also takes an optional parameter. You can set the speed of the toggle by passing a parameter to the method. The parameter can be slow, fast or any value in "milliseconds" (like 1000). Try these ...
$("div").toggle(1000);
$("div").toggle("slow");
or $("div").toggle("fast");
That’s it. Thanks for reading ☺.