展开和折叠 DIV [重复]答案

【问题标题】：Expand and collapse a DIV [duplicate]展开和折叠 DIV [重复]
【发布时间】：2014-07-20 22:33:18
【问题描述】：

我正在尝试制作内容DIV 以根据其内容展开和折叠。

展开前应该是这样的——

展开后应该是这样的——

我不确定如何为此使用 jquery。尝试使用 toggle 类，但无法正常工作。

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

希望有人能帮助我。

谢谢。

【问题讨论】：

@pramod.nikam.dev 你看不到图片吗？
尝试构建一个简单的示例，然后发布您到目前为止的 jQuery 代码，以及一个简化的演示以重现您遇到的特定问题。
是的，真的看不到图片
i.stack.imgur.com/FB3x9.jpg i.stack.imgur.com/QF0u4.jpg

标签： javascript jquery

【解决方案1】：

您可以将额外的内容放在一个 Div 中。并让它在开始时显示：无，一旦用户点击查看详细信息，只需将其显示切换为显示：块。

如果用户点击折叠，让 div 再次显示：无。

<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>

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

【讨论】：

我还是不能让它工作。
您到底想要什么。请详细说明您的问题。这个演示有什么问题。
我正在寻找使用 jquery 的解决方案 - 这是我目前的代码 jsbin.com/bicenomi/3/edit

【解决方案2】：

查看下面的演示

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

$(".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";
        });
    });

});

【讨论】：

感谢您的建议，但我没有寻找像 Accordion 这样的解决方案。看看我的图片，你可以得到一个想法。