JQuery .is( ":visible" ) always returning TRUE

JQuery .is( ":visible" ) always returning TRUE

I can't seem to get the .is( ":visible" ) to work.  It always returns true.  I believe I have followed the correct syntax, etc.  Clicking on .heading, toggles the .details class to hide/show.  All seems to work fine, except the .is(";visible") always returns true, even when the .details gets hidden and I can clearly see the display:none is there.  Maybe something to do with the fact the display property is dynamically changed...?

Code is below:

  1. <html>
  2. <head>      
  3.     <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous" type="text/javascript" charset="utf-8"></script>  
  4. </head>
  5. <body>
  6.     <br><br>
  7.     <div id="question_section315">
  8.         <p class="details" id="top_header315" style="margin-top: -10px;">TEST TEXT</p>
  9.         <p class="details">OTHER TEST TEXT #2</p>
  10.         <div class="row">
  11.             <h1 class="heading" data-id="315" style="display:inline-block;white-space:pre-wrap;cursor:pointer;">TEST HEADER</h1>                                                                       
  12.         </div>           
  13.     </div>
  14. <script>
  15.     $(document).on("click", ".heading", function(){        
  16.         var id = $(this).attr("data-id");
  17.         $('#question_section'+id).find('.details').toggle(500);
  18.         console.log('#top_header'+id);
  19.         var visible = $('#top_header'+id).is( ":visible" );
  20.         console.log('visible: '+visible);
  21.         //other logic if visible here
  22.     });     
  23. </script>
  24. </body>
  25. </html>