Bootstrap and toggle calendar

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.min.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.css">
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/fullcalendar/1.6.4/fullcalendar.print.css">
   
    <div class="container">  
        <br>
<!-- Trigger Button HTML -->
           
            
<input type="button" class="btn btn-primary" data-toggle="collapse" data-target="#toggleDemo" value="Calendar">
<!-- Collapsible Element HTML -->
<div id="toggleDemo" class="collapse collapse in"><div id='calendar'></div></div>
<br>

JavaScript

$(document).ready(function() {

    // page is now ready, initialize the calendar...

    $('#calendar').fullCalendar({
        // put your options and callbacks here
    })

});