최대 높이의 전환을 작동하지 않습니다?

Question

1. 을 내가 작동하지 않는 부트 스트랩 bootstrap collapse panel

2. 하지만 최대 높이의 전환처럼 순수 CSS 메이크 collape 패널을 사용하려면, 왜? 내가 선택하는 경우 패널을 전환하는 방법

3. , 나는 클릭 내가 두 번 패널 붕괴 할

* { 
 
    padding: 0; 
 
    margin: 0; 
 
    } 
 
    
 
    .content { 
 
    width: 400px; 
 
    height: 300px; 
 
    background: #ccc; 
 
    margin:40px auto; 
 
    border:1px solid #eee; 
 
    } 
 
    label{ 
 
    \t padding:10px; 
 
    } 
 
    .content>div{ 
 
    \t width:100%; 
 
    \t transition: all ease 1s; 
 
    } 
 
    p{ 
 
    word-break: break-word; 
 
    height: 0%; 
 
    overflow: hidden; 
 
    max-height: 0; 
 
    transition: max-height ease 1s; 
 
    } 
 
    input[type=radio]{ 
 
    \t transition: all ease 1s; 
 
    \t -webkit-appearance:none; 
 
    } 
 

 
    label:hover+input+p{ 
 
\t max-height: 100%; 
 
    }

<div class="content"> 
 
    <div> 
 
     <label for="demo1">demo1</label> 
 
     <input type="radio" name='demo' id='demo1'> 
 
     <p>dsfjhbklweji;dfsfjhbk lwedsfjhbklweji;df sfjhbklweji;dfovjji;dfovj</p> 
 
    </div> 
 
    <div> 
 
     <label for="demo2">demo2</label> 
 
     <input type="radio" name='demo' id='demo2'> 
 
     <p>ewrsds fjhbk lweji;dfsfjh bklwedsfjhbkl weji;dfs fjhb klweji;df ovj ji ;dfokj</p> 
 
    </div> 
 
    <div> 
 
     <label for="demo3">demo3</label> 
 
     <input type="radio" name='demo' id='demo3'> 
 
     <p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p> 
 
    </div>

link in JSfidle마다 radio:checked에

Answer 1

,의 경우 transition을 p tag에게 줄 수 있습니다. 아래 74,및 height,

(플러스 + 선택자) - 여기서 같은 P를 입력 한 후에 배치하고, 여기에서, 입력 소자 뒤에 배치 된 모든 독립 요소를 선택한다.

최대 높이 속성은 요소의 최대 높이를 설정하는 데 사용됩니다. 에서 height 속성의 사용 된 값이 max-height에 지정된 값보다 커지는 것을 방지합니다.

.content{ 
 
    width:400px; 
 
    height:400px; 
 
    border:1px solid #ccc; 
 
    margin:auto; 
 
} 
 
p{ 
 
    height:0px; 
 
    opacity:0; 
 
    word-break:break-word; 
 
    transition:all 0.6s ease; 
 
} 
 
input[type="radio"]{ 
 
    -webkit-appearance:none; 
 
} 
 
input[type="radio"]:checked + p{ 
 
    height:50px; 
 
    opacity:1; 
 
}

<div class="content"> 
 
    <div> 
 
     <label for="demo1">demo1</label> 
 
     <input type="radio" name='demo' id='demo1'> 
 
     <p>dsfjhbklweji;dfsfjhbk lwedsfjhbklweji;df sfjhbklweji;dfovjji;dfovj</p> 
 
    </div>  
 
    <div> 
 
     <label for="demo2">demo2</label> 
 
     <input type="radio" name='demo' id='demo2'> 
 
     <p>ewrsds fjhbk lweji;dfsfjh bklwedsfjhbkl weji;dfs fjhb klweji;df ovj ji ;dfokj</p> 
 
    </div> 
 
    
 
    <div> 
 
     <label for="demo3">demo3</label> 
 
     <input type="radio" name='demo' id='demo3'> <p>sdjkassfjhbklweji;dfsfjhbklwedsfjhbklweji;dfsfjhbklweji;dfovjji;dfodlnjk</p> 
 
    </div>