The script is simple, but where is the error?

Question

JavaScript

Good time!
I use a script to display elements on click. The problem is that the element becomes visible after clicking and scrolling the page. Those. if you click on the button and do not rotate the page, the element remains invisible, and if you scroll the mouse wheel - we immediately see. I use MODX, I add the script after connecting jqery.
Can you tell me where the error is?

<script type="text/javascript">
    $(document).ready(function () {
        $("#a_sop_mat1").click(function () {
            $("#sop_mat1").css("display", "inline");
        });
    });
</script>

Answer 1

Most likely there is no reflow or repaint, and you need to force it somehow.
Try

$("#sop_mat1").css("display", "inline").position();

You can add your own redraw method, for example.

$.fn.redraw = function(){
  $(this).each(function(){
    var redraw = this.offsetHeight;
  });
};

Use like this:

<code>$("#sop_mat1").css("display", "inline").redraw();</code>