HTML 아코디언 처음에는 자동으로 닫을 수 없습니다. CSS 부트 스트랩

Question

나는 아코디언을 여기에서하려고합니다. 하지만 첫 번째 탭은 자동으로 열립니다. 수업을 무너 뜨린 후에도!

무엇이 잘못 되었나요?

스택 오버플로를 만드는 임의의 단어가 내 게시물이 모든 코드가 아니라고 생각합니다. 누군가가 html 부트 스트랩을 마스터하면 저에게 알려주시겠습니까? 제 파일에 약간의 기능이 도움이 필요합니다.

코드 :

<div class="panel-collapse collapse in" id="collapseOne"> 

체크 아웃에서 in 클래스를 제거

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div class="panel-group" id="accordion"> 
 
    <div class="panel panel-default" id="panel1"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"> 
 
     <a class="collapsed" data-target="#collapseOne" data-toggle="collapse" href="#collapseOne" data-parent="#accordion">What We Offer</a> 
 
     <i class="indicator glyphicon glyphicon-chevron-right pull-right"></i> 
 
     <i class="indicator glyphicon glyphicon-chevron-right pull-left"></i> 
 
     </h4> 
 
    </div> 
 
    <div class="panel-collapse collapse in" id="collapseOne"> 
 
     <div class="panel-body"> 
 
     <p>Lorem ipsum dolor sit amet, suspendisse at sit, porttitor integer in. Ipsum sed vel dapibus et. Ut integer mi, elit posuere, earum eleifend vestibulum, tempor natoque molestie aliquet voluptas mus, velit condimentum dui eget. Velit turpis, dignissim 
 
      convallis luctus vestibulum augue praesent mus. Sit sit mauris pellentesque, massa nec. Odio urna nonummy, magna sed nullam integer, leo nec. Ac nunc amet interdum dolor mattis quisque. 
 
     </p> 
 
     <p>Sollicitudin dolor, cras mauris iaculis sed parturient, felis dictum sit ligula etiam scelerisque ut, libero curabitur voluptatibus metus neque ac. Feugiat nibh porta libero ut placerat, auctor et. Quis eros in, non nibh id turpis ullamcorper. 
 
      Semper turpis, eget fermentum aperiam elit, augue integer. Mauris curabitur facere consectetuer, tincidunt ac pulvinar, consectetuer magna ultrices est doloribus ligula, in interdum vel urna, suspendisse magna per enim integer at montes. At 
 
      quis, libero nisl ipsam ipsum, in tortor sodales ac tortor officiis id. Nunc vestibulum viverra mus, ullamcorper aliquet tellus felis nec sit ut. Metus tincidunt orci nec, metus erat suspendisse eleifend ac magna sollicitudin, vestibulum orci 
 
      et. Ipsum elit, aliquam risus ullamcorper nulla. At libero scelerisque fermentum aperiam per. Sed commodo gravida diam etiam dignissim, amet nam. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
    <div class="panel panel-default" id="panel2"> 
 
    <div class="panel-heading"> 
 
     <h4 class="panel-title"><a class="collapsed" data-target="#collapseTwo" data-toggle="collapse" href="#collapseTwo" data-parent="#accordion">Testimonials</a> 
 
     <i class="indicator glyphicon glyphicon-chevron-right pull-right"></i> 
 
     <i class="indicator glyphicon glyphicon-chevron-right pull-left"></i> 
 
     </h4> 
 
    </div> 
 
    <div class="panel-collapse collapse" id="collapseTwo"> 
 
     <div class="panel-body"> 
 
     <p>Aliquet varius vel etiam velit in, ultrices eros vitae, pharetra ut velit sit ipsum, nisl dignissim sed eleifend nunc, amet eros. A laoreet egestas et faucibus et. Sit felis lobortis dignissim porta vehicula, ac ea tortor magna eget, eget condimentum 
 
      est, sit massa ipsum integer, aenean tristique ultricies euismod interdum. Nostra euismod ipsum euismod vestibulum vitae. Urna enim felis leo erat, a mattis sed etiam vivamus tristique accumsan, curabitur wisi pretium sed risus sagittis ac. 
 
      Eget bibendum suscipit viverra in mauris, cras turpis. 
 
     </p> 
 
     <p>Cras purus, purus ipsum viverra semper purus wisi in. Penatibus est, ullamcorper dolor vehicula aliquam odio, vel tristique eu ac, non nullam lorem massa dolore duis, justo venenatis. Vitae sed nascetur, metus lacinia suspendisse in eget consequat, 
 
      est neque gravida phasellus nullam vitae nec, dolor dui orci parturient, eget dolore wisi tellus lorem. Tincidunt sodales quis pellentesque, non vitae blandit. Scelerisque non a nibh. Lobortis erat faucibus duis interdum adipiscing eros. Praesent 
 
      phasellus, magnis nam in eu, at montes etiam nibh placerat morbi amet, aenean nec lectus luctus. Proin lorem ultricies vero vel consectetuer, et feugiat tempor, neque donec wisi blandit, vulputate aliquet wisi donec eros. Nulla erat, semper 
 
      dignissim ducimus viverra ante nullam. Donec habitasse, dapibus vitae imperdiet nunc tempor aenean ipsum, quisque est egestas ut senectus metus iaculis, diam lectus convallis, massa gravida est dapibus id habitant. Nibh posuere mi. Auctor convallis 
 
      augue ipsum. 
 
     </p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
<!-- Post Info --> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

Answer 1

: jsfiddle이

[부트 스트랩의