My accordion is expanding, but the div inside it appears blank instead of displaying its content. Any suggestions on how to fix this? Thank you.
How can I ensure that the div inside the accordion shows its content?
Here is the code: http://jsfiddle.net/6xnt3p8j/1/
JavaScript
$(document).ready(function(){
$(".accordion2 h3").eq(40).addClass("active");
$(".accordion2 p").eq(40).show();
$(".accordion2 h3").click(function(){
var video = $(".accordion2 h3.active").next().children();
var src = video.attr("src");
video.attr("src","");
video.attr("src",src);
$(this).next("div").slideToggle("slow")
.siblings("div:visible").slideUp("slow");
$(this).toggleClass("active");
$(this).siblings("h3").removeClass("active");
});
});
CSS
body {
margin: 10px auto;
width: 570px;
font: 75%/120% Arial, Helvetica, sans-serif;
}
.box {
display: inline-block;
padding: 3px;
margin: 3px auto;
}
.accordion2 {
min-height:95px;
height:auto !important;
height:95px;
}
.accordion2 h3 {
padding-bottom: 1px;
margin: 0;
border-bottom: none;
cursor: pointer;
min-height:95px;
height:auto !important;
border:1px solid blue;
}
.accordion2 h3:hover {
background-color: #e3e2e2;
}
.accordion2 h3.active {
background-position: right 5px;
}
.accordion2 div {
margin: 0;
display: none;
}
HTML
<div class="accordion2">
<h3>
<div class="box"><img src='http://img.youtube.com/vi/tPgf_btTFlc'>
</div>
</h3>
<div>text text text text text text text text</div>
<h3>title</h3>
<div>text text text text text text text text</div>
<h3>title</h3>
<div>text text text text text text text text</div>
</div>
Appreciate your help /M