The below HTML and JavaScript is working as expected, but I want to make sure I am using this correctly.
I have two divs but only one needs to be displayed depending on the value of mode.
HTML:
<body>
<div id="a-div" style="display: none;">
<button id="add" class="btnstyle">Add </button>
</div>
<div id="d-div" style="display: none;">
<button id="delete" class="btnstyle">Delete</button>
</div>
</body>
JS:
//$("#a-div").hide();
//$("#d-div").hide();
var mode = 'add';
//var mode = 'delete';
if (mode === 'add') {
$("#a-div").show();
} else {
$("#d-div").show();
}
This is giving me expected results. Is there a better way of reversing the style="display: none" attribute?
The below HTML and JavaScript is working as expected, but I want to make sure I am using this correctly.
I have two divs but only one needs to be displayed depending on the value of mode.
HTML:
<body>
<div id="a-div" style="display: none;">
<button id="add" class="btnstyle">Add </button>
</div>
<div id="d-div" style="display: none;">
<button id="delete" class="btnstyle">Delete</button>
</div>
</body>
JS:
//$("#a-div").hide();
//$("#d-div").hide();
var mode = 'add';
//var mode = 'delete';
if (mode === 'add') {
$("#a-div").show();
} else {
$("#d-div").show();
}
This is giving me expected results. Is there a better way of reversing the style="display: none" attribute?
-
3
Why do you have “smart quotes”
‘’in your code instead of straight quotes:''? – Sebastian Simon Commented Sep 16, 2015 at 19:38 -
2
You're definitely doing it correctly.
show()is designed for jobs like this. – tcooc Commented Sep 16, 2015 at 19:46 - @ Xufox I wrote this sample code in a word document (bad choice) – Nik Commented Sep 16, 2015 at 19:46
5 Answers
Reset to default 1Your current code should be working fine, but there are many ways of solving this problem. I would remend using jQuerys toggle():
$("#a-div").toggle(mode === "add");
$("#a-div").toggle(mode === "delete");
Alternatively, you could give them the id´s add-div and delete-div and make one of them visible like this:
$("#" + mode + "-div").show();
You can use:
$("#a-div").toggle();
Alternatively;
.show() / .hide()
.fadeIn() / fadeOut()
There's several methods to do this (like you can see in other answers) but i think the show() function is enough and do the work in your case.
You can also use css() method of JQuery like following :
$("#a-div").css('display','block');
Hope this helps.
You need to modify the display property of the inline style attribute.
Like this...
var mode = 'add';
if (mode === 'add') {
$("#a-div")[0].style.display = 'block';
} else {
$("#d-div")[0].style.display = 'block';
}
Or you can use something like inherit instead of block.
Another option is to move the styles to css:
html:
<div id="a-div" class="notdisplayed">
<button id="add" class="btnstyle">Add </button>
</div>
<div id="d-div" class="notdisplayed">
<button id="delete" class="btnstyle">Delete</button>
</div>
css:
.notDisplayed {display:none;}
Script:
$("#a-div").addClass("notDisplayed");
$("#d-div").removeClass("notDisplayed");
This method is more general than show/hide, as it can be extended to any style rule.