在可扩展手风琴中显示 div> - 不显示内的内容[英]Display inside expandable accordion - doesn't show what's inside 本文翻译自 Marcus Silverman 查看原文 2014-08-18 195 css/

I have an expanding accordion. But when adding a inside the area, the div does not show, but only displays as blank? Any ideas? Thanks.

我有一支不断扩大的手风琴。但是当在区域内添加一个div时,div不显示,但只显示为空白?有任何想法吗?谢谢。

How can I get the div inside the to display its content?

如何在内部显示div以显示其内容?

The code: http://jsfiddle.net/6xnt3p8j/1/

代码: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 a million /M

万分感谢你

1 个解决方案

#1

remove display: none; in the css

remove display:none;在css

Here is your css file

这是你的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;

}

#1