The problem is that the id selector #bgr is more specific than the class selector .display, so its styles "win" when the two conflict. toggleClass() is adding/removing the class, but it doesn't matter since the display: none from #bgr overrides display: block from .display.
Although !important is rarely a great idea!important is rarely a great idea, it does solve the problem here, allowing the class styles to override the id styles:
.display { display:block !important; opacity:1 !important; } $(document).ready(function(e) { $('#button').click(function() { $('#menu').slideToggle(); $('#bgr').toggleClass('display'); }); });#menu { display:none; position: absolute; top:40px; right: 10%; z-index:10; width: 30%; height:400px; background: lightblue;} #bgr { display:none; opacity:0; position:absolute; top:0; left:0; z-index:1; height: 100%; width:100%; background: grey; -webkit-transition:opacity 1s; transition:opacity 1s; } #button {cursor: pointer;} #button p { position: absolute; top:0; right:10%; z-index:100; margin:0; color:lightblue; font-size:2em; } .display { display:block !important; opacity:1 !important; }<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <div id="button"> <p>menu</p> </div> <div id="menu"></div> <div id="bgr"></div>
