Hướng dẫn thu gọn Vertical Timeline với "Xem Thêm" button

Tiếp tục chủ đề về Vertical Timeline cho Flatsome, đôi khi sẽ có những Timeline quá dài khiến bài viết hoặc trang của bạn trở nên khá rối mắt, trong bài viết này, mình sẽ chia sẻ với các bạn cách để chúng ta thu gọn Vertical Timeline với button click “Xem Thêm” & “Thu Gọn” lại như cũ. Các bạn tham khảo phần demo phía dưới.

Bài viết này, mình có tham khảo & sử dụng đoạn code trong bài “Hướng dẫn thu gọn nội dung chi tiết sản phẩm Flatsome” do bác Toản viết, nếu bạn nào đang sử dụng đoạn code này trước đó thì có thể sẽ có xung đột nhé!

Demo Thu Gọn Vertical Timeline

Title 1

1996

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Title 2

1996

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Title 3

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

Last title

Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.

HTML Tạo Vertical Timeline Flatsome

Để tạo và thu gọn Vertical Timeline cho theme Flatsome, các bạn chỉ cần coppy đoạn HTML dán vào khung html bài viết hoặc trang, sau khi update thì các bạn cũng có thể dễ dàng tùy chỉnh lại nội dung với trình UX-Builder của Flatsome.

[section]

[row class="mywebsite-timeline-vertical"]

[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="my-timeline"]

[row_inner style="small" class="time-section"]

[col_inner span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px"]

[ux_stack distribute="between" class="my-time"]

[ux_html class="timeline-title1"]

Title 1
[/ux_html]
[ux_html class="timeline-title2"]

1996
[/ux_html]

[/ux_stack]
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/col_inner]

[/row_inner]

[/col]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="my-timeline"]

[row_inner style="small" class="time-section"]

[col_inner span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px"]

[ux_stack distribute="between" class="my-time"]

[ux_html class="timeline-title1"]

Title 2
[/ux_html]
[ux_html class="timeline-title2"]

1996
[/ux_html]

[/ux_stack]

[/col_inner]
[col_inner span="6" span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px"]

<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/col_inner]
[col_inner span="6" span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px"]

[ux_image id="4894" height="50%"]


[/col_inner]

[/row_inner]

[/col]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="my-timeline"]

[row_inner style="small" class="time-section"]

[col_inner span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px"]

[ux_html class="my-time timeline-title1"]

Title 3
[/ux_html]
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/col_inner]

[/row_inner]

[/col]
[col span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px" class="my-timeline last-col"]

[row_inner style="small" class="time-section"]

[col_inner span__sm="12" padding="10px 0px 0px 0px" margin="0px 0px -10px 0px"]

[ux_html class="my-time timeline-title1"]

Last title
[/ux_html]
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.</p>

[/col_inner]

[/row_inner]

[/col]

[/row]

[/section]

Đoạn Code Thu Gọn Vertical Timeline Flatsome

Sau khi dán đoạn html Vertical Timeline cho bài viết hoặc trang, các bạn coppy toàn bộ đoạn code phía dưới của mình, và dán vào dưới cùng file functions.php của theme-child là được.

Có nhiều bạn không thích paste vào file functions.php thì có thể tách đoạn css trong khung <style> </style> ra dán vào CSS tùy chỉnh, còn đoạn js (dòng 107-138), các bạn chỉ cần coppy và paste vào khung “FOOTER SCRIPTS” trong “Advanced” của Flatsome.

/*
 * Rút Gọn Vertical Timeline with view more - view less button
 * Author: Huy Lee - https://mywebsite.com.vn
*/
add_action('wp_footer','huy_timeline_more_less');
function huy_timeline_more_less(){?>
<style>
/*my css timeline vertical*/
.timeline-title1, .timeline-title2{font-size: 1.3rem;
    font-weight: bold;}
.timeline-title1{padding-right:50px}
.mywebsite-timeline-vertical .my-timeline{
  padding-bottom: 2rem;
  border-left: 2px solid var(--primary-color);
  position: relative;
}
.my-timeline.last-col {
    border: 0px!important;
}
.mywebsite-timeline-vertical .my-timeline:before{
    content:"\e01a";
    font-family: fl-icons;
    color: var(--primary-color);
    font-size: 17pt;
    width: 40px;
    height: 40px;
    background: white;
    box-shadow: 3px 3px 0px #bab5f8;
    position: absolute;
    left: -22px;
    top: -1px;
    padding: 0 7px;
    border: 2px solid var(--primary-color);
    border-radius: 99px;
  }

.my-timeline .my-time{
  line-height: 32px;
  border-radius: 4px;
  margin-bottom: 10px;
  padding: 4px 10px;
  background: var(--primary-color);
  color: #ffffff;
}
.time-section{
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    margin-left: 33px!important;
    margin-top: -13px;
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, .3);
}
.time-section:before{
    top: 21px;
    left: 26px;
    border-top: 8px solid transparent;
    border-right: 8px solid var(--primary-color);
    border-bottom: 8px solid transparent;
    position:
    absolute;
    content: '';
    z-index: 9;
    }
.mywebsite-timeline-vertical{
    padding: 15px 15px 25px 32px!important;
    display: inline-block;
}
.mywebsite-timeline-vertical .my-timeline:hover:before{
    color: white;
    background:  var(--primary-color);
    box-shadow: 3px 3px 0px #bab5f8;
  }
/*End timeline vertical*/
/*CSS read more - read less Timeline*/
.section .mywebsite-timeline-vertical{
    overflow: hidden;
    position: relative;
}
.devvn_readmore_flatsome {
    text-align: center;
    cursor: pointer;
    position: absolute;
    z-index: 10;
    bottom: 0;
   	width: 102%;
   	background: #fff;
   	margin-left: -40px;
    }
.devvn_readmore_flatsome:before {
    height: 155px;
    margin-top: -145px;
    content: "";
    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 100%);
    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);
    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgb(255 255 255) 79%, rgb(255 255 255) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff00', endColorstr='#ffffff',GradientType=0 );
    display: block;
}
.devvn_readmore_flatsome a {
    color:  var(--primary-color);
    display: inline-block;
	width: 200px;
    }
.devvn_readmore_flatsome_less:before {
    display: none;
}
</style>
<script>
        (function($){
            $(document).ready(function(){
                $(window).on('load', function(){
                    if($('.section .mywebsite-timeline-vertical').length > 0){
                        var wrap = $('.section .mywebsite-timeline-vertical');
                        var current_height = wrap.height();
                        var your_height = 500;
                        if(current_height > your_height){
                            wrap.css('height', your_height+'px');
                            wrap.append(function(){
                                return '<div class="devvn_readmore_flatsome devvn_readmore_flatsome_more"><a title="Xem thêm" href="javascript:void(0);" class="button is-underline btn-66";>Xem Đầy Đủ</a></div>';
                            });
                            wrap.append(function(){
                                return '<div class="devvn_readmore_flatsome devvn_readmore_flatsome_less" style="display: none;"><a title="Xem thêm" href="javascript:void(0);" style="border-bottom: 1px solid;font-size: 13pt;">Thu Gọn Timeline</a></div>';
                            });
                            $('body').on('click','.devvn_readmore_flatsome_more', function(){
                                wrap.removeAttr('style');
                                $('body .devvn_readmore_flatsome_more').hide();
                                $('body .devvn_readmore_flatsome_less').show();
                            });
                            $('body').on('click','.devvn_readmore_flatsome_less', function(){
                                wrap.css('height', your_height+'px');
                                $('body .devvn_readmore_flatsome_less').hide();
                                $('body .devvn_readmore_flatsome_more').show();
                            });
                        }
                    }
                });
            });
        })(jQuery);
</script>
    <?php
}

Trong quá trình thực hiện, nếu có thắc mắc nào, các bạn có thể để lại bình luận cho mình phía dưới bài viết.

Chúc các bạn thành công!