Question

我正在努力让内容DIV根据其内容展开和折叠。

在扩展之前它应该是这样的 - enter image description here

扩展之后应该是这样的 - enter image description here

我不知道如何使用jquery。尝试使用toggle课程，但无法使其发挥作用。

到目前为止，这是我的所有代码 - http://jsbin.com/bicenomi/1/edit

希望有人能帮助我。

谢谢。

Answer 1

您可以将额外内容放入Div中。并在开始时显示：none，一旦用户点击View Details，只需将其显示切换为display：block。

如果用户点击折叠，请再次显示div display：none。

<html>
<head>
    <script type="text/javascript">
        function HideInfo() {

            var Chck = document.getElementById('ViewCollapse');
            alert(Chck.innerHTML);
            if (Chck.innerHTML == "Collapse") {

                document.getElementById('MoreInfo').style.display = 'none';
                Chck.innerHTML = "View";

            }
            else if (Chck.innerHTML == "View") {
                alert('view');
                document.getElementById('MoreInfo').style.display = 'block';
                Chck.innerHTML = "Collapse";

            }
        }
    </script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>

         <div class="timetable">


                  <h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>
                  <h6><small>No words</small></h6>
                  <h5><small>No words found in this</small></h5>


                  <h5><strong>xxxxxxxxxx</strong></h5>
                  <h6><small>No words</small></h6>
                  <h5><small>No words found in this</small></h5>

             <div id="MoreInfo">
                  <h5><i class="icon fa fa-circle"></i><strong>xxxxxxxxxx</strong></h5>
                  <h6><small>No words</small></h6>
                  <h5><small>No words found in this</small></h5>


                  <h5><strong>xxxxxxxxxx</strong></h5>
                  <h6><small>No words</small></h6>
                  <h5><small>No words found in this</small></h5>
           </div>

         </div>
         <div class="viewmore">
             <p class="small"><span>Medium:</span> No words</p>
             <p onclick="HideInfo();" id="ViewCollapse" class="small">Collapse</p>
         </div>

</body>

</html>

我只是创建一个小型演示。它适用于我，请尝试并告诉我它是否解决了您的问题

Answer 2

查看下面的演示

http://jsfiddle.net/hungerpain/eK8X5/7/

JS

$(".header").click(function () {

    $header = $(this);
    //getting the next element
    $content = $header.next();
    //open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
    $content.slideToggle(500, function () {
        //execute this after slideToggle is done
        //change text of header based on visibility of content div
        $header.text(function () {
            //change text based on condition
            return $content.is(":visible") ? "Collapse" : "Expand";
        });
    });

});

展开并折叠DIV

2 个答案: