Javascript 可展开按钮

我一直在尝试创建与此站点底部（）类似的可扩展按钮，但我一直很难找到它。我是JavaScript的初学者，因此非常感谢您的帮助。

HTML:

一些长文本

---

CSS:

#lol{颜色：白色；字体大小：2em；背景：黄色；边框：5px纯橙；边框半径：3px；填充：10px 20px}

尝试定义按钮的宽度

参见示例

---

我已经做了CSS，你可能需要在下面的链接中有确切的按钮。我希望有帮助。加油

CSS:

HTML:

计划
维护

---

小提琴链接：

我没有创建一个非常详细的示例，但这应该会让您走上正确的道路。你可以在这里玩

它们使用Jquery和Css的组合，当用户单击“按钮”时，它添加类“fullheight”，当再次单击时，它添加类“smallheight”

我没有这样做。购买也许你仍然可以从我的示例中获益：

我只是像他们那样创建了一个容器DIV，然后使用Jquery滑动打开和关闭它：

jQuery

 $(".button").click(function () {
        $button = $(this);
        $content = $button.next(); 
        $content.slideToggle(500, function () {   
         });

    });

有关完整示例，请参见

---

希望这对您有所帮助。：）

实际上那不是“按钮”，它的设计就像按钮。在这里检查可能是向我们展示您已有的任何代码的最佳方式

.big {
  background: #fb7303;
  height: 100px;
  width: 250px;
  border: 5px solid #ffa500;
  border-radius:10px;
  color: white;
  font-size: 20px;
 }

 <button class="big">Schedule <br>Maintenance</button>

$( "#reveal-container" ).toggleClass("smallheight");
$( "#reveal-container" ).toggleClass("fullheight");

 $(".button").click(function () {
        $button = $(this);
        $content = $button.next(); 
        $content.slideToggle(500, function () {   
         });

    });