One little doubt in javascript accept this code
$('#B').css("display", "none" : "block");
if div B is display: none
on event auto switch to block
One little doubt in javascript accept this code
$('#B').css("display", "none" : "block");
if div B is display: none
on event auto switch to block
On init you could check using jQuery's :hidden
selector
// App init:
$('#B:visible').hide();
than if you need to .toggle() it on some event:
// Some event:
$('#B').toggle();
Example:
$("[data-toggle]").on("click", function() {
$(this.dataset.toggle).toggle();
});
<button data-toggle="#B" type="button">Toggle B</button>
<div id="B">Lorem ut florem</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
A preferred way, instead of using jQuery's show/hide/toggle methods is to use .toggleClass()
and define in CSS the needed styles
$("[data-toggle]").on("click", function() {
$(this.dataset.toggle).toggleClass("is-hidden");
});
/* Bool helpers */
.is-hidden { display:none; }
<button data-toggle="#B" type="button">Toggle B</button>
<div id="B" class="is-hidden">Lorem ut florem</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>