why this slideUp/slideDown is not working with jquery?

why slideDown does not work in this code

$(".btn-more").click(function(){
                if ($(this).parent().is(".open") ) {
                    $(this).parent().prev().slideToggle(100);
                    $(this).parent().removeClass('open');
                    $(this).html("read more..");
                }
                else {
                    $(this).parent().prev().slideToggle(100);
                    $(this).parent().addClass('open');
                    $(this).html("read less..");
                }

the Html

开发者_如何学Python<div id="content">
   <p>
       <span></span>
   </p>
   <span id="read-more"></span>
   <div class="more active" id="preface-more">
       <a class="btn-more" id="preface-more-btn" href="#"></a>
   </div>

what iam encountering now is the slideup works but slidedown doesn't slide just show, even though iam using slideToggle.. any advice please?

thank you..

---

Please check the below code.
(function(){
    $(".btn-more").click(function(){
        //$("#read-more").toggle();You can use toggle also
     if($("#read-more").is(".open")) {
        $("#read-more").slideUp(100);
        $("#read-more").removeClass('open')
        $(this).html("read more..");
      }else{
        $("#read-more").addClass('open')
        $("#read-more").slideDown(100);
        $(this).html("read less..");
      }
    });
});
<div id="content">
   <p>
       <span></span>
   </p>
   <span id="read-more" class="open">data dat data data</span>
   <div class="more active" id="preface-more">
       <a class="btn-more" id="preface-more-btn" href="#">Read less</a>
   </div>
</pre>