javascript - Display <div></div> inside expandable accordion - doesn't show what's inside <div> -
i have expanding accordion. when adding inside area, div not show, displays blank? ideas? thanks.
how can div inside display content?
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 { /* background: red; */ 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>
thanks million /m
remove display: none; in css
here css file
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 { /* background: red; */ margin: 0; }
Comments
Post a Comment