i found this neat example on jsfiddle of an accordion created using only css3, no javascript involved.
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> <-- content loaded 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;*/
}
I'm facing an issue with the fixed height set in CSS and dynamic content loaded via PHP. Since I am unaware of the content's height beforehand, I need a way to adjust the height dynamically.
By loading content into the p tag through PHP, I can calculate its height using:
var v = $("#test_small").height();
// Add the calculated height to .ac-small element
$('.ac-container input:checked article.ac-small').css("height", v+'px');
The problem lies in applying CSS to the selector properly, as it seems like there might be an issue with the selector
$('.ac-container input:checked article.ac-small')