두 개의 다른 버튼 클릭을 기반으로 두 개의 다른 div 섹션에서 축소 및 축소하는 방법은 무엇입니까?

크리스티

다음과 같이 정의 된 두 개의 버튼이 있습니다.

<button href="#select" class="btn btn-default" data-toggle="collapse">
       Select
</button>

<button href="#add" class="btn btn-default" data-toggle="collapse">
       Add
</button>

그리고 아래와 같이 정의 된 두 개의 다른 div 섹션이 있습니다.

<div id="select" class="collapse">
       Select your option
</div>

<div id="add" class="collapse">
        Add your option
</div> 

'선택'버튼을 클릭하면 div가 축소됩니다.
그 후 '추가'버튼을 클릭하면 div 추가가 선택 div 바로 아래에 축소됩니다.

한 번에 하나의 div 만 표시하고 싶습니다. '선택'을 클릭하면 div가 축소되어야하며 그 후 사용자가 div '추가'를 클릭하면 div가 축소되고 표시 될 div 만 추가되어야하며 그 반대의 경우도 선택해야합니다.

위의 방법을 시도했지만 예상 한 결과를 얻지 못했습니다. 내가 원하는 행동을 얻을 수있는 방법이 있습니까?

감사!

감자 껍질 벗기기

두 div 섹션을 모두 a에 래핑 .panel한 다음 ID가있는 부모 컨테이너에 래핑하면 됩니다. 그런 다음 ID를 data-parentdiv에 속성 으로 추가하십시오.

<div id="parent">
  <div class="panel">
    <div id="select" class="collapse" data-parent="#parent">
      Select your option
    </div>
  </div>
  <div class="panel">
    <div id="add" class="collapse panel" data-parent="#parent">
      Add your option
    </div>
  </div>
</div>

바이올린 - https://jsfiddle.net/dszc5q5r/

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관