Tell me where my error is in the code. I don’t understand yet, but I study hard.
It is required to create a menu with the display of only one div, there is such a construction, but the script does not work. By the way, the switch button must be moved to any point and the script call, it comes from the id of the clicked block.
If there are options with a more elegant solution, I will be grateful. I try to learn the language and understand writing the scripts myself, therefore, I ask you not to kick too much for the curvature of the task.
$(document).ready(function() { $('#mf0').css("opacity": "0", "pointer-events": "none"); $('#mb1').click(function() { if ($('#mf0').css("opacity") == "1") { $("#mf0").css("opacity": "0", "pointer-events": "none"); } else if ($('#mf0').css("opacity") == "0") { $("#mf0").css("pointer-events": "auto", "opacity": "1"); }; }); }); #mf0 { position: absolute; width: 84%; height: 95.5%; margin-right: 16%; margin-top: 0.75%; left: 1em; margin-bottom: 0.75%; background-color: rgba(255, 255, 255, 1); border: rgb(180, 192, 204) 1px solid; border-radius: 5px; opacity: 0; pointer-events: none; } .menu_bar { position: absolute; height: 1.5em; width: 10.8em; background-color: rgba(0, 0, 0, 0.1); border-radius: 2px; margin-left: 86.3%; overflow: hidden; -webkit-transition: all 0.2s linear; -moz-transition: all 0.2s linear; transition: all 0.2s linear; border: rgb(217, 217, 217) solid 1px; cursor: pointer; } #menu_bar_1 { margin-top: 7%; } <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script> <div id="mf0"></div> <div class="menu_bar" id="menu_bar_1"> <p id="txt"><p> </div> 
