title: How to use fancy box in html and make it display in all browsers?
body: <p>I am creating my own Github page and want to add a fancy box for my short bio. 
  This is the code I have written for it:</p>
  
  <pre><code>&lt;li&gt;
    &lt;a id="fbox" class="fancybox" href="#short-bio"&gt;Short Bio&lt;/a&gt;
    &lt;div id="short-bio" style="display:none;"&gt;
      &lt;h3&gt;Anmol Panda&lt;/h3&gt;
      &lt;p&gt;Lorem Ipsum&lt;/p&gt;
    &lt;/div&gt;
  &lt;/li&gt;
  </code></pre>
  
  <p>The box displays 'on click' when I open the file locally using Google Chrome but it does not show up on the actual Github page. It also does not show up in Firefox. Can someone guide me what is going wrong and how I may correctly use it?</p>
  
  <p>Sorry, I forgot to add the javascript code:</p>
  
  
  
  <pre><code>    &lt;script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/fancybox/2.1.5/jquery.fancybox.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      $(document).ready(function() {
              $(".fancybox").fancybox({
                      'width'        : '100%',
                      'height'       : '80%',
                      'autoScale'    : true,
                      'transitionIn' : 'elastic',
                      'transitionOut': 'elastic',
              });
      });
      &lt;/script&gt;
  </code></pre>
  
  <p>Also, this is the website: <a href="https://anmol-007.github.io/" rel="nofollow noreferrer">https://anmol-007.github.io/</a>
  Thanks in advance.</p>