Home >Daily Programming >HTML Knowledge >How to use jquery to achieve click expand and shrink effect

How to use jquery to achieve click expand and shrink effect

藏色散人Original: 2018-12-17 14:12:0712382browse

When we read a long text, we usually click the expand or collapse button. The effect obviously helps improve the user experience. Then use jquery to achieve the click expand and shrink effect, and to achieve the expand and hide effect in the up and down direction, you can use the slideUp() and slideDown() methods in jQuery to achieve it.

Now we will introduce to you the jquery method to achieve the click expand and shrink effect based on specific code examples.

The code example is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>jquery实现点击展开收缩效果示例</title>
    <style type="text/css">
 .box{
            width: 400px;
 background: #f0e68c;
 border: 1px solid #a29415;
 }
        .box-inner{
            padding: 10px;
 }
    </style>
    <script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
 $(document).ready(function(){
            $(".slide-up").click(function(){
                $(".box").slideUp();
 });
 $(".slide-down").click(function(){
                $(".box").slideDown();
 });
 });
 </script>
</head>
<body>
<button type="button" class="slide-up">关闭</button>
<button type="button" class="slide-down">展开</button>
<hr>
<div class="box">
    <div class="box-inner">新浪娱乐讯 据台湾媒体报道，2018MAMA香港场14日晚间7点盛大展开颁奖典礼，嘻哈、性感、抒情各种团体
    合作的舞台表演精彩绝伦，《ETtoday》全程独家直播典礼现场，为观众快速整理8大看点，从防弹RM流利的英文演讲开场，到最后防弹内
    心告白曾想解散，全场零冷场。</div>
</div>
</body>
</html>

In the above code, we created two divs, box and box-inner containing text. When we click the close and expand buttons, they will be called respectively. slideUp() and slideDown() methods.

slideUp()The method hides the selected element by using the sliding effect, if the element is already displayed.

slideDown() method displays hidden selected elements by using the sliding effect.

The final effect is as follows:

How to use jquery to achieve click expand and shrink effect

Note: slideDown() is suitable for elements hidden through the jQuery method, or in CSS Declare display:none to hide elements (does not apply to elements hidden via visibility:hidden).

This article is about the specific method of jquery to achieve the click expand and shrink effect. It is very simple. I hope it will be helpful to friends in need!

The above is the detailed content of How to use jquery to achieve click expand and shrink effect. For more information, please follow other related articles on the PHP Chinese website!

jquery css display

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use jquery to achieve image flipping effectNext article：How to use jquery to achieve image flipping effect

See more

How to use jquery to achieve click expand and shrink effect

Related articles