[Bootstrap] Radio button toggle/collapse 예제

 

보통 <a>, <button>으로  collapse 기능 구현을 합니다.

 

[참고문서]

https://getbootstrap.com/docs/4.0/components/collapse/

<p>
  <a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" 
  role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button class="btn btn-primary" type="button" data-toggle="collapse"
  data-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-target
  </button>
</p>
<div class="collapse" id="collapseExample">
  <div class="card card-body">
    Anim pariatur cliche reprehenderit......
  </div>
</div>

이 예제 코드는 어떤 걸 클릭 하던 toggle 형태로 동작 하게 됩니다.

하지만 저는

• 버튼 1은 "hide"
• 버튼 2는 "show"

로 동작 하게 하고 싶었습니다.

 

이와 같이 동작 하게 하려면 아래와 같이 코드를 수정 하면 됩니다.

 

1. data-toggle="collpase" 코드를 삭제 합니다.
2. hide 기능만 동작 하도록 아래 코드 추가
   onchange="$('#thingRegisterInfoDiv').collapse('hide')"
3. show 기능만 동작 하도록 아래 코드 추가
   onchange="$('#thingRegisterInfoDiv').collapse('show')"
   
   이렇게 작성 하시면, radio button 에 특정 기능으로만 동작 하도록 해줄 수 있습니다.

<div class="form-check">
  <input class="form-check-input" type="radio" name="thingCertInfos" id="thingCertInfoNone" value="none" 
  data-target="#thingRegisterInfoDiv" onchange="$('#thingRegisterInfoDiv').collapse('hide')" checked>
  <label class="form-check-label" for="thingCertInfos">
    <span class="font-weight-bold">기기 정보 없음</span>
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="thingCertInfos" id="thingCertInfoRegister" value="register" 
  data-target="#thingRegisterInfoDiv" onchange="$('#thingRegisterInfoDiv').collapse('show')">
  <label class="form-check-label" for="thingCertInfos">
    <span class="font-weight-bold">기기 정보 입력</span></label>(생성할 인증서에 기기 정보 등록)
</div>

<div class="collapse" id="thingRegisterInfoDiv">
  <div class="card card-body">
  ...중략...
  </div>
</div>

이 정도로 마무리 합니다.