Я нашел этот код на Codepen, и он, кажется, прекрасно работает там, но когда я использую его для одного из моих проектов, он расширяет форму при загрузке страницы.Я хочу, чтобы начальное состояние формы было свернуто, а затем расширено, когда я нажимаю на кнопку.Пожалуйста, помогите с этим.
Я пробовал некоторые вещи jquery, но я довольно новичок в этом, поэтому я здесь.Я не использую scss, я использую только materialize, bootstrap и jquery.
Я хочу, чтобы форма изначально была свернута, как показано в примере на codepen- https://codepen.io/Reklino/pen/ebxhm
<html>
<div class="expansive-button v1">
<i class="fa fa-cog fa-2x"></i>
</div>
<div class="expansive">
<h3>Advanced Options</h3>
<input placeholder="Advanced Option #1">
<input placeholder="Advanced Option #2">
</div>
</html>
<script>
$(".v1").unbind('click').click(function () {
$(this).toggleClass('open');
$(this).next().stop().animate({
height: "toggle",
opacity: "toggle"
}, "slow");
});
</script>