Javascript Epand/Collapse开关赢得'；t随着内容的扩展而浮动

我对一些展开/折叠代码有问题。我希望HTML中的p class=“heading”标记（用于切换展开/折叠框）随展开内容向下移动。现在，内容正在扩展并填充到切换下方

我试图修改代码，但是扩展函数不起作用，所以我为不能提供一个而道歉

下面是有问题的代码

CSS

/*鼠标悬停链接*/
p{
颜色：rgb（206、134、57）；
左边距：-10px；
右边距：-10px；
边缘底部：0px；
过渡：背景。75秒慢进慢出，方块阴影。5秒慢进慢出；
}
悬停{文本装饰：下划线；
光标：指针；
颜色：rgb（206、134、57）；
-moz盒阴影：0-2px2px；
-网络工具包盒阴影：0-2px2px；
盒影：1px.1px 5px.1px#787878；
}
.标题{
字体系列：Arial、Helvetica、无衬线字体；
字体大小：13px；
文本对齐：居中；
填充：7px 14px 7px 12px；
边框左下半径：5px；
边框右下半径：5px；
文字装饰：无；
背景：-莫兹线性梯度（顶部，#dedede，白色75%）；
背景：-webkit梯度（线性，0.0,0.75%，从（#dedede）到（白色））；
边框顶部：1px实心#A6；
大纲：无；
}
a{
颜色：rgb（206、134、57）；
}
.标题：悬停{
过渡：背景。75秒慢进慢出，方块阴影。5秒慢进慢出；
}
a:悬停{
颜色：rgb（137,90,39）；
}
.过渡{
边框：1px实心#A6；
边界半径：5px；
背景：白色；
填充顶部：7px；
右边填充：10px；
垫底：0px；
左侧填充：10px；
过渡：背景。75秒慢进慢出，方块阴影。5秒慢进慢出；
}
.过渡：悬停{
背景：#e6ebef；
盒影：1px.1px 5px.1px#787878；
过渡：背景。75秒慢进慢出，方块阴影。5秒慢进慢出；
}

JQuery/JavaScript

    <script type="text/javascript">
jQuery(document).ready(function() {
jQuery(".content").hide();
//toggle the componenet with class msg_body
jQuery(".heading").click(function() {
 var s = $(this);
jQuery(this).next(".content").slideToggle(500);
 s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
});
});
</script>

jQuery（文档）.ready（函数（）{
jQuery（“.content”）.hide（）；
//使用类msg_body切换组件网
jQuery（“.heading”）。单击（函数（）{
var s=$（本）；
jQuery（this）.next（“.content”）.slideToggle（500）；
s、 html（s.text（）==“单击此处查看更多信息…”？“单击此处查看更多信息…”：““单击此处查看更多信息…”）；
});
});

HTML

树木移除许可证



移除商业或多家庭财产上的任何树木需要树木移除许可证。

单击此处了解更多信息
网上申请程序

有关简单、逐步的许可申请流程，请访问我们的在线许可和许可门户

任何帮助都将不胜感激

这就是你的意思吗

您需要将“p”标记移动到“content”div下面，然后相应地切换js：

jQuery(document).ready(function() {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        var s = $(this);
        jQuery(".content").slideToggle(500);
        s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
    });
});

你有你的

<div class="transition"><span style="font-weight: bold; font-size: 18px; color: rgb(0, 130, 200);"><u>Tree Removal Permit</u><br>
    </span>&nbsp;<br>
    A tree removal permit is required for removal of any tree on a commercial or multi-family property.<br>
    <p class="heading">Click here for more information...&nbsp;</p>
    <div class="content">
    <div style="height:7px;font-size:7px;">&nbsp;</div>
    <span style="font-size: 14px; color: rgb(6, 78, 137);"><b>Online Application Process</b></span>
    <ul>
        <li type="square">For an easy, step-by-step permit application process visit our Online Licensing and Permitting Portal</a>.</li>
    </ul>
    <div style="height:7px;font-size:7px;">&nbsp;</div>
    </div>
    </div>

jQuery(document).ready(function() {
    jQuery(".content").hide();
    //toggle the componenet with class msg_body
    jQuery(".heading").click(function() {
        var s = $(this);
        jQuery(".content").slideToggle(500);
        s.html(s.text() == 'Click here for less information...' ? 'Click here for more information...' : 'Click here for less information...');
    });
});