Having issues with navigation menu collapsing as it should. My code is posted below...please help.

        <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
          <span class="icon-bar"></span>
        </button>

        <a class="navbar-brand" href="#">Masquerade</a>
        <div class="callapse navbar-callapse">

          <ul class="nav navbar-nav navbar-right">
             <li><a href="#" >Ticket Information</a></li>
              <li><a href="#">Location Details</a></li>
              <li><a href="#">Attire ~ 1920's Formal</a></li>
              <li><a href="#">Metro United Way Committee</a></li>
          </ul>
        </div>
      </div>
    </div>

    <div class="container">
        <div class="jumbotron">
          <h1>Masquerade<h1>
        </div>
    </div>

      <!--image scrolling banner-->

      <div>
        <img src="img/banner pic 1.jpg" alt=""/>
        <img src="img/banner pic 2.jpg" alt=""/>
        <img src="img/banner pic 3.jpg" alt=""/>
        <img src="img/banner pic 4.jpg" alt=""/>
      </div>

      <div>
        <h1>Fundraising for Community Growth!</h1>
          <p id=>Join us for a magical night of dancing and glamour!  All while supporting a great cause.<br>
          Set in the 1920's, the days of jazz and glitter, experience tasty eats, beautiful decore, and fancy outfits.<br></p>

          <p>Please Save the date for September 30, 2017 for the experience of your life.<br></p>

          <p>Location and ticket cost will be listed at a later date. In the mean time, please review the links below for more information on the 1920's</p>
      </div>
</div>