Native Javascript for Bootstrap으로 접기 만들기(탈jQuery)

제목대로 Native Javascript for Bootstrap에서 접는(collapse)을 만들어 보겠습니다.

Link와 Button을 각각 누르면 메시지가 나오고, 한 번 더 누르면 메시지가 사라진다는 것입니다.



왜 Native JavaScript for Bootstrap을 사용했는지 jQuery없이 Bootstrap을 사용하고 싶었기 때문입니다. (Bootstrap은 jQuery에 의존합니다.)
jQuery를 사용하는 경우와, Native javascript를 사용하는 경우로, 어느 정도 코드의 차이가 있는지도 신경이 쓰였으므로 비교해 보려고 생각합니다.

Native Javascript for Bootstrap으로 구현

조금 규칙이 있으므로 설명합니다.

click 되는 요소가 a 태그라면 href내에 #collapseExample（変更可） 를 추가. (button이라면 data-target="#collapseExample（変更可）" 추가.)

click 되는 요소에 data-toggle="collapse" 를 추가.

click 되면 나오는 요소에 class="collapse" id="collapseExample" 를 추가. ※id는 click되는 요소에 추가한 id와 같이 하는 것.

위가 지켜지면 javascript가 필요하지 않습니다!

See the Pen Native JavaScript for Bootstrap_1022 by Mai3ta ( ㅎㅎ )
on CodePen .

jQuery로 구현

See the Pen vYYgjqM by Mai3ta ( ㅎㅎ )
on CodePen .

<script async=""src="https://static.codepen.io/assets/embed/ei.js"/>

요약

음, 익숙한 jQuery가 더 편하지만 js없이 쓸 수있는 것도 꽤 편리합니다!

jQuery는 무겁거나 SPA에 적합하지 않기 때문에 최근의 트렌드에서는 버려지고 있습니다.

내 현장도 jQuery는 사용하지 않고 앞으로 Native Javascript로 쓰는 것이 늘어날 것 같아서, 쓰는 방법에 익숙해지도록 합니다・・・w

참고문헌

Native JavaScript for Bootstrap