如何使用javascript和css显示展开文本

按如下方式更改脚本。

$(document).ready(function() {
  $(".text").hide();  
  $(".expand").click(function() {
    $(".text").slideUp(500);
    $(".expand").text('MORE');
    if ($(this).next(".text").is(":visible")) {
      $(this).next(".text").slideUp(500);
    } else {
      $(this).next(".text").slideToggle(500);
      $(this).text('LESS');
    }
  });
});

https://jsfiddle.net/drh8snj5/

这里有一个显示和隐藏的文本：

https://jsfiddle.net/mupfu53p/1/

$(document).ready(function() {
  $('.content').each(function() {
    var thisText = $(this).text();
    var shortText = thisText.substring(0, thisText.indexOf(" ", 50)) + '...';
    $(this).data('longText', thisText);
    $(this).data('shortText', shortText);
    $(this).text($(this).data('shortText'));
  });

  $('.more').click(function(e) {
    e.preventDefault();
    var thisSib = $(this).prev('.content');
    var currentText = $(thisSib).text();
    if (currentText === $(thisSib).data('shortText')) {
      $(thisSib).text($(thisSib).data('longText'));
    } else {
      $(thisSib).text($(thisSib).data('shortText'));
    }
  });
});

不确定这是否是你想要的，但也许其他答案更接近。

试试这个：

$(document).ready(function() {
    $(".text").hide();  
    $(".expand").click(function() {
        $(".text").slideUp(500);
        $(".expand").text('MORE');
    if ($(this).next(".text").is(":visible")) {
        $(this).next(".text").slideUp(500);
    } else {
        $(this).next(".text").slideDown(500);
        $(this).text('LESS');
    }
    });
});

请找到下面的代码。我想这会解决你的问题。仅供参考，html图像标签将像这个

$(document).ready(function() {
    $(".text").hide();
  
     $(".expand").click(function() {
       $(".more").html('LESS');
           $(".text").slideUp(500);
            if ($(this).next(".text").is(":visible")) {
                    $(this).next(".text").slideUp(500);
                    $(".more").html('MORE');
            } else {
                    $(this).next(".text").slideToggle(500);
            }
    });
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<div class="content_horses" id="page">
            <div class="accordeon" class="een">
                <div class="sientje">
                    <img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
                    <div class="name">
                        SIENTJE
                    </div>
                    <div class="expand">
                        <div class="more">MORE</div>
                    </div>
                    <div class="text">
                        <div class="sientje_t">
TEST1
                          TEST@
                          TEST3
                          TEST4
                          TEST5
                          TEST6
                          TEST7
                        </div>
                    </div>
                </div>  
            </div>
            <div class="accordeon" class="twee">
                <div class="sientje">
                    <img class="photo" src="http://demo.joomlaman.com/jm-palas/images/showcase/bg16.jpg" alt="sientje" />
                    <div class="name">
                        SIENTJE
                    </div>
                    <div class="expand">
                        <div class="more">MORE</div>
                    </div>
                    <div class="text">
                        <div class="sientje_t">
TEST1
                          TEST@
                          TEST3
                          TEST4
                          TEST5
                          TEST6
                          TEST7
                        </div>
                    </div>
                </div>  
            </div>

这应该可以工作。

$(document).ready(function() {
  $(".expand").click(function() {
    var txt = $(this).find('.more').text();
    $('.more').text('MORE');
    $(".text").slideUp(500);
    $(this).next('.text').slideToggle(500);
    $(this).find('.more').text('LESS');
  });
});

.expand {
  cursor: pointer;
}
.text {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="content_horses" id="page">
  <div class="accordeon" class="een">
    <div class="sientje">
      <img class="photo" src="http://placehold.it/150" alt="sientje" />
      <div class="name">
        SIENTJE
      </div>
      <div class="expand">
        <div class="more">MORE</div>
      </div>
      <div class="text">
        <div class="sientje_t">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Saepe optio aperiam, accusamus assumenda! Quidem accusantium, officia, esse ipsam magni nostrum asperiores cum quod itaque, est obcaecati perspiciatis amet alias quia?
        </div>
      </div>
    </div>  
  </div>
  <div class="accordeon" class="twee">
    <div class="sientje">
      <img class="photo" src="http://placehold.it/150" alt="sientje" />
      <div class="name">
        SIENTJE
      </div>
      <div class="expand">
        <div class="more">MORE</div>
      </div>
      <div class="text">
        <div class="sientje_t">
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis animi eum mollitia provident aut cum eos expedita commodi, sunt, quam, odio error. Tempore quasi, tenetur blanditiis debitis deleniti nobis deserunt!
        </div>
      </div>
    </div>  
  </div>