Html Boostrap 3，切换折叠在页面加载时不会保持关闭状态

我在boostrap 3中使用数据切换=“collapse”，但在页面加载时，我隐藏的div内容不会保持关闭状态。我已经找到了很多解决方案，但没有一个奏效。下面是我的代码，很抱歉我是个自由职业者，还没有时间流利地使用html

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <div class="thumbnail">
                <img src="img/ground/grnd1.jpg" alt="...">
  <div class="caption">

    <p style=" color: dimgray;">text here,text here,text here,text here,text here,</p>
    <p> <a class="btn btn-default" href="#foundations" data-toggle="collapse" data-target="#foundations" style="padding:2%;">Continue Reading &raquo;</a></p>
  </div>

      <div class="container" >
                    <div class="collaspe" id="foundations" data-toggle="false">
                    <br><br>
                <div class="col-md-12 col-sm-12">
                    <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Pad Foundations</h1>
                <br><br>
                    <img src="img/ground/grnd2.jpg" alt="..." style="width:100%;">
                     <p style=" color: dimgray;">text here, text here, text here, text here, </p><br><br>

                     <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Jack Pad Foundations</h1>
                     <img src="img/ground/grnd5.jpg" alt="..."  style="width:100%;">
                     <p style=" color: dimgray;">text here,text here,text   here,text here,</p><br><h2 style="font-weight: 300">Need advice?<a    href="contact_us.html">Contact us</a></h2><br><br>                   
  </div> 
  </div>
  </div>
  </div>
  </div>
  </div>
  </div>

文本在这里，文本在这里，文本在这里，文本在这里，文本在这里，文本在这里，文本在这里





地基基础



文本在这里，文本在这里，文本在这里，文本在这里，文本在这里，



千斤顶垫基础
需要建议吗？

提前感谢您

您将id为“foundations”的div的“collapse”类名拼错了

文本在这里，文本在这里，文本在这里，文本在这里，文本在这里，文本在这里，文本在这里







地基基础




文本在这里，文本在这里，文本在这里，文本在这里，文本在这里





千斤顶垫基础
文本在这里，文本在这里，文本在这里，文本在这里，文本在这里



需要建议吗？

lol这是我一天的总结，非常感谢你，它很管用！！我已经试着解决这个问题3个小时了，哈哈。

<div class="row">
    <div class="container">
        <div class="col-md-12">
            <div class="thumbnail">
                <img src="img/ground/grnd1.jpg" alt="...">
                <div class="caption">

                    <p style=" color: dimgray;">text here,text here,text here,text here,text here,</p>
                    <p> <a class="btn btn-default" href="#foundations" data-toggle="collapse" data-target="#foundations" style="padding:2%;">Continue Reading &raquo;</a>
                    </p>
                </div>

                <div class="container">
                    <div class="collapse" id="foundations" data-toggle="false">
                        <br>
                        <br>
                        <div class="col-md-12 col-sm-12">
                            <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Pad Foundations</h1>
                            <br>
                            <br>
                            <img src="img/ground/grnd2.jpg" alt="..." style="width:100%;">
                            <p style=" color: dimgray;">text here, text here, text here, text here, </p>
                            <br>
                            <br>

                            <h1 style=" color: dimgray; font-weight:300; margin-top:5%;">Jack Pad Foundations</h1>
                            <img src="img/ground/grnd5.jpg" alt="..." style="width:100%;">
                            <p style=" color: dimgray;">text here,text here,text here,text here,</p>
                            <br>
                            <h2 style="font-weight: 300">Need advice?<a    href="contact_us.html">Contact us</a></h2>
                            <br>
                            <br>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>