Содержание аккордеона вне аккордеона div

Question

По какой-то причине контент внутри моего аккордеона появляется снаружи, где он должен. Я хочу, чтобы div автоматически соответствовал содержанию внутри него, которое, как я думал, должно произойти, когда вы не укажете высоту?

Что происходит:

HTML:

<div id="accordion"> 
     <h3>13/08/2015, 12:00, Company</h3> 
      <div> 
       <p>Date: 13/08/2015<br> 
       Start time: 12:00<br> 
       End time: 19:00<br> 
       Allocated break period: 15:00 - 15:30<br> 
       Assigned by: Manager name<br> 
       Company: Company<br> 
        <button type="button" class="confirm">Confirm</button> 
        <button type="button" class="cancel">Cancel</button> 
        <button type="button">Submit</button> 
       </p> 
      </div>  
      <h3>shift2</h3>    
      <div> 
      <p>This is the second sentence.</p> 
      </div> 
      <h3>shift3</h3> 
      <div> 
      <p>This is the third sentence.</p> 
      </div> 
    </div> 

CSS

#accordion{ 
    background-color: #8f8f8f; 
    color:#ffffff; 
    min-width:98%; 
    margin: 1%; 

} 

#accordion div{ 
    background-color: #f2f2f2; 
    color:#000000; 
} 

#accordion h3{ 
    padding-left:1%; 
    cursor:pointer; 
} 

Кроме того, я хочу, чтобы ДИВ для дальнейшего растягивать, когда кнопка отмены нажата, чтобы включить форму, как это будет сделано?

Answer 1

Ваши кнопки в вашем css должны содержать что-то неправильно. Ваш код работает. Посмотрите здесь: Working jsfiddle

К вашему второму вопросу: Div автоматически растягивается, если вы положите в него свою форму. Пример:

//find div 
var form=document.getElementById("accordion"); 

//create new div 
var div=document.createElement('div'); 

//add text to div 
div.appendChild(document.createTextNode("New Content")); 

//append new div to div 
form.appendChild(div);