When upgrading to Bootstrap 4, the jQuery show/hide's no longer work when using a hidden attribute. This code works when using Bootstrap 3.4.1, but no longer works when using v4.0.0 & up.
I found that Bootstrap 3 [hidden] attribute uses display:none whereas Bootstrap 4 [hidden] attribute uses display:none !important. It is the !important that breaks this code.
If I remove the hidden attribute in jQuery after the show(), this code will work with Bootstrap 4. Unfortunately, I would have to change 2400 show/hide's in the solution to get this to work.
Is it possible to override Bootstrap 4 [hidden] attribute so that it ignores the !important tag?
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
$("#hide").click(function(){
$("p").hide();
//$("p").hide().attr("hidden", true);
});
$("#show").click(function(){
$("p").show();
//$("p").show().removeAttr("hidden");
});
});
</script>
</head>
<body>
<p hidden>If you click on the "Hide" button, paragraph will disappear.</p>
<button id="hide">Hide</button>
<button id="show">Show</button>
</body>
</html>
与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
