CODEWITHSUNDEEP
jqueryhtmlcssaccordion
user3574766
user3574766

Reputation: 631

Accordion content outside accordion div

For some reason the content inside my accordion is appearing outside where it's supposed to. I want the div to automatically fit the content inside it, which I thought should happen when you don't specify a height?

What is happening:enter image description here

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;
}

Furthermore I want the div to stretch further when the cancel button is pressed to include a form, how would this be done?

Upvotes: 0

Views: 522

Answers (1)

Jonas
Jonas

Reputation: 2249

Your buttons in your css must contain something wrong. Your code is working. Look here: Working jsfiddle

To your second question: The Div stretches automatically if you put your form in it. Example:

//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);

Upvotes: 1

Related Questions