더보기/jQuery로 덜 보임

Question

고객이 추가 제품을 구입할 수있는 addon을 작성한 웹 페이지가 있지만 페이지에 들어갈 때마다이 모든 제품이 표시되는 것을 원하지 않습니다. 그래서 어떤 종류를 찾고 있어요

<div class="wrapper"> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 1</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 2</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 3</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 4</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 5</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 6</div> 
 
</div> 

그래서 난 당신이 쇼를 누르면 페이지를 입력하지만 때마다 단지 3 개 제품을 표시하는 방법의 어떤 종류를 찾고 있어요 "더 보여" 더 많은 버튼을 누르면 다음 3 개 제품이 표시됩니다.

나는 이것에 관한 많은 글을 보았지만 이것과 관련된 것을 찾을 수 없다.

ps. "더보기"를 누를 때 애니메이션이있을 수 있다면 멋질 것입니다.

Answer 1

클래스를 사용하므로 인라인 스타일은 사용하지 마십시오. 또한 JQuery와를 사용하여 다음과 같은 방법을 확인 :gt()

//this will execute on page load(to be more specific when document ready event occurs) 
 
if ($('.ty-compact-list').length > 3) { 
 
    $('.ty-compact-list:gt(2)').hide(); 
 
    $('.show-more').show(); 
 
} 
 

 
$('.show-more').on('click', function() { 
 
    //toggle elements with class .ty-compact-list that their index is bigger than 2 
 
    $('.ty-compact-list:gt(2)').toggle(); 
 
    //change text of show more element just for demonstration purposes to this demo 
 
    $(this).text() === 'Show more' ? $(this).text('Show less') : $(this).text('Show more'); 
 
});

.ty-compact-list { 
 
    padding: 5px 5px 5px 0px; 
 
    float: left; 
 
    width: 100%; 
 
} 
 
.show-more { 
 
    display: none; 
 
    cursor: pointer; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="wrapper"> 
 
    <div class="ty-compact-list">Product 1</div> 
 
    <div class="ty-compact-list">Product 2</div> 
 
    <div class="ty-compact-list">Product 3</div> 
 
    <div class="ty-compact-list">Product 4</div> 
 
    <div class="ty-compact-list">Product 5</div> 
 
    <div class="ty-compact-list">Product 6</div> 
 
    <div class="show-more">Show more</div> 
 
</div>

Answer 2

나는 알렉스 제시했다고 그 일의 클래스 기반의 방식을 좋아하지만 다른 방법이 할 수있는 : 여기

function showFirstThree() 
    { 
    $('.ty-compact-list').hide(); 
    $('.ty-compact-list').slice(0,3).show(); 
    } 

    function showAll(){ 
    $('.ty-compact-list').show(); 
    } 

Answer 3

을 토글을 사용하는 아주 간단한 대답입니다. 이 몇 가지 요인에 따라 달라질 것이다 달성하는 방법

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script> 
 
    $(function() { 
 
    $('.showmoreButton').on('click', function() { 
 
     $('.showmore').slideToggle("fast"); 
 
     }); 
 
    }); 
 
</script> 
 
<div class="showmoreButton">Toggle Results</div> 
 
<div class="wrapper"> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 1</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 2</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 3</div> 
 
<div class="showmore" style="display: none;"> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 4</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 5</div> 
 
<div class="ty-compact-list" style="padding: 5px 5px 5px 0px; float: left; width: 100%;">Product 6</div> 
 
</div> 
 
</div>