javascript - Jquery 缓慢隐藏/显示文本、照片、对象等最小高度 200px

Question

有一些 jquery 脚本必须隐藏一些文本、对象、照片等。脚本隐藏所有内容，但我只需要显示 200px，然后单击“更多”- 显示 100%。 (jquery lib 我包括)我做错了什么？感谢所有人。

这是一个脚本:

 <span id="hello-bigtext">Some big text, objects, photos, etc</span>
 <div id="hello-more">more</div>
 <div id="hello-less" >less</div>


<script>
$("#hello-bigtext").hide("slow");
$("#hello-less").hide("slow");

$("#hello-more").click( function() {
    $("#hello-bigtext").show("slow");
    $("#hello-less").show("slow");
    $("#hello-more").hide("slow");
});

$("#hello-less").click( function() {
    $("#hello-bigtext").hide("slow");
    $("#hello-less").hide("slow");
    $("#hello-more").show("slow");
});
</script>

Answer 1

$( document ).ready(function(){
  $("#hello_bigtext").slideUp(600);
  $("#hello_less").slideUp(600);

  $("#hello_more").click( function() {
    $("#hello_bigtext").slideDown(600);
    $("#hello_less").slideDown(600);
    $("#hello_more").slideUp(600);
  });

  $("#hello_less").click( function() {
    $("#hello_bigtext").slideUp(600);
    $("#hello_less").slideUp(600);
    $("#hello_more").slideDown(600);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>


<div id="hello_bigtext" style="border-style:solid; height:200px; background-color:red; cursor:pointer;">Some big text, objects, photos, etc</div>
 <div id="hello_more" style="border-style:solid; height:200px; background-color:Yellow; cursor:pointer;">more</div>
 <div id="hello_less" style="border-style:solid; height:200px; background-color:green; cursor:pointer;">less</div>