Display all portfolio items with a button in javascript

Question

I am building a portfolio website. Within the portfolio items I want to display 6 items by default and click a button (Show More) to show the remaining items, in which the text of the button should change to (Show Less). The items should return to its original state when the (Show Less) button is clicked again. I was able to sort each item by category filter but displaying all items is the problem. Check my code snippet below.

 // PORFOLIO CATEGORIES $('.port_cat').on('click', function() { $('.port_cat').removeClass('active-port'); $(this).addClass('active-port'); }); // PORTFOLIO FILTER $(".port_cat").click(function() { var value = $(this).attr('data-filter'); if (value == "all") { $('.filter').show('1000'); } else { $(".filter").not('.' + value).hide('3000'); $('.filter').filter('.' + value).show('3000'); } }); 

 .project { position: relative; overflow: hidden; } .project .overlay { display: inline-block; text-align: center; position: absolute; z-index: 3; padding: 10% 8%; top: 0; left: 0; content: ""; width: 100%; height: 100%; color: black; opacity: 0; background: rgba(60, 235, 226, 0.9); -webkit-transition: background 0.5s, opacity 0.5s 0.5s; -moz-transition: background 0.5s, opacity 0.5s 0.5s; -o-transition: background 0.5s, opacity 0.5s 0.5s; -ms-transition: background 0.5s, opacity 0.5s 0.5s; transition: background 0.5s, opacity 0.5s 0.5s; } .project .overlay:hover { opacity: 1; -webkit-transition: background 0.25s, opacity 0.25s 0s; -moz-transition: background 0.25s, opacity 0.25s 0s; -o-transition: background 0.25s, opacity 0.25s 0s; -ms-transition: background 0.25s, opacity 0.25s 0s; transition: background 0.25s, opacity 0.25s 0s; transition-delay: 0; -webkit-transition-delay: 0; } .project .overlay:hover .content { opacity: 1; opacity: 0.2s; filter: alpha(opacity=20s); } .project .overlay:hover h3 { opacity: 1; -moz-transition: opacity 0.3s, -moz-transform 0.3s; -webkit-transition: opacity 0.3s, -webkit-transform 0.3s; transition: opacity 0.3s, transform 0.3s; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .project .overlay:hover p { opacity: 1; -webkit-transform: translateY(0px); -moz-transform: translateY(0px); -ms-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); } .project .content { position: relative; opacity: 0; text-align: center; vertical-align: middle; display: inline-block; width: 100%; min-height: 165px; word-break: break; opacity: 0.5s; filter: alpha(opacity=50s); -webkit-perspective: 300px; -moz-perspective: 300px; -o-perspective: 300px; -ms-perspective: 300px; perspective: 300px; } .project h3 { opacity: 0; font-weight: 400; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); -moz-transition: opacity 0.2s, -moz-transform 0.2s; -webkit-transition: opacity 0.2s, -webkit-transform 0.2s; transition: opacity 0.2s, transform 0.2s; } .project p { font-size: 1em; color: black; opacity: 0; -webkit-transform: translateY(-20px); -moz-transform: translateY(-20px); -ms-transform: translateY(-20px); -o-transform: translateY(-20px); transform: translateY(-20px); -moz-transition: background-color 0.5s, opacity 0.5s 0.15s, -moz-transform 0.5s 0.15s; -webkit-transition: background-color 0.5s, opacity 0.5s 0.15s, -webkit-transform 0.5s 0.15s; transition: background-color 0.5s, opacity 0.5s 0.15s, transform 0.5s 0.15s; } .label-danger { width: 400px; } 

 <div class="section-3" id="portfolio"> <h3>STUFFS I'VE WORKED ON</h3> <p>Stuffs i am able to do that define my strenght and weakness</p> <div class="row"> <div class="col-sm-6 col-sm-offset-3 col-xxs-12"> <div class="card-panel white filter-card"> <ul> <li class="port_cat active-port" data-filter="all">ALL</li> <li class="port_cat" data-filter="website">WEBSITE</li> <li class="port_cat" data-filter="graphics">GRAPHICS</li> <li class="port_cat" data-filter="ui-design">UI DESIGN</li> <li class="port_cat" data-filter="application">APPLICATION</li> </ul> </div> </div> </div> <div class="container portfolio-image-container"> <div class="row"> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter website"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter application"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter ui-design"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter website"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter ui-design"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter graphics"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter graphics"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter website"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> <div class="col-md-4 col-sm-6 col-xs-12 work-img project card-panel filter graphics"> <img class="img-responsive" src="http://via.placeholder.com/350x150" alt=""> <a href="" class="overlay"> <div class="content"> <h3>THIS IS A SAMPLE HEADING</h3> <P>Sample project description goes in here</P> <span class="label label-danger">Web Design</span> </div> </a> </div> </div> </div> <a class="waves-effect waves-light btn">View All Items</a> </div> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

I think jQuery could be a nice way to go here: https://www.w3schools.com/jquery/eff_slidedown.asp

HTML:

<p>This is a paragraph.</p>
<button class="btn1">Slide up</button>
<button class="btn2">Slide down</button>

jQuery:

<script>
$(document).ready(function(){
    $(".btn1").click(function(){
        $("p").slideUp();
    });
    $(".btn2").click(function(){
        $("p").slideDown();
    });
});
</script>