I'm dealing with a wrapper div that has the classes d-none d-lg-block, making it visible only on large screens.
Inside this wrapper, there's another div that should become visible when the user clicks a button. I've tried various methods to override the display, z-index, and position properties, but it seems like the d-none class of the wrapper is stubbornly unchangeable. I need a solution that doesn't involve altering the wrapper div (i.e., removing the d-none class), as other elements within it must remain hidden from the user.
Take a look at the example below:
$("#btn").on('click', function() {
document.getElementById("text-to-display").classList.toggle("display-me");
});.display-me {
position: absolute;
top: 30px;
width: 100%;
z-index: 9999;
display: block !important;
}<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col d-none">
<h2 id="text-to-display">Should be visible</h2>
</div>
</div>
<div class="row">
<div class="col" id="btn">
<button>Click me</button>
</div>
</div>
</div>