Question

i have this example in jsfiddle of a accordion only made with css3, no js.

HTML:

<div class="ac-container">
    <div>
        <input id="ac-1" name="accordion-1" type="radio" checked />
        <label for="ac-1">About us</label>
        <article class="ac-small">
            <p id="test_small">test</p> <-- this tag will come from php
        </article>
    </div>
    <div>
        <input id="ac-2" name="accordion-1" type="radio" />
        <label for="ac-2">How we work</label>
        <article class="ac-medium">
            <p id="test_medium">test</p>
        </article>
    </div>
</div>​

css:

.ac-container input:checked ~ article.ac-small{
    height: 140px;
}
.ac-container input:checked ~ article.ac-medium{
    height: 180px;
}
.ac-container input:checked ~ article.ac-large{
   /* height: 240px;*/
}

the issue i have is that the height is already set, and i add the content with php and i’m not sure how much content will be so i need to have a dynamic height.

the php will be loading the p tag so i can find the height like this:

var v = $("#test_small").height();

// add the height to the .ac-small
$('.ac-container input:checked article.ac-small').css("height", v+'px');

the problem i have is that that the css wont apply to the selector, i believe the selector $('.ac-container input:checked article.ac-small') is wrong or something.

Answer 1

try

$('.ac-container input:checked').parent('div').children('article.ac-small').css("height", v+'px');