Hide Pagination

by Rick1107

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<ul class="paginationHide pagination list-inline text-center d-flex justify-content-center align-items-center">
                                                                        <li class="page-item"><a class="page-link" href="#"><i class="fa fa-chevron-left fa-2x" aria-hidden="true"></i></a></li>
                                                                        <li class="page-item active"><a class="page-link" href="#">1</a></li>
                                                                        <li class="page-item"><a class="page-link" href="#">2</a></li>
                                                                        <li class="page-item"><a class="page-link" href="#">3</a></li>
                                                                        <li class="page-item"><a class="page-link" href="#">4</a></li>
                                                                        <li class="page-item"><a class="page-link" href="#">5</a></li>
                                                                        <li class="page-item"><a class="page-link" href="#"><i class="fa fa-chevron-right fa-2x" aria-hidden="true"></i></a></li>
                                                                    </ul>
  
  <button class="btnHide">TOGGLE VISIBILITY</button>

CSS

.paginationHide {
    margin: 30px auto;
  transition: all 0.5s linear;
  transition-property: opacity, height, margin;
  display: block;
  position: relative;
}

.hiddenContent {
  opacity: 0;
  height: 0px;
  margin: 0 auto;
}

button {
  display: block;
  margin: 0 auto;
}

JavaScript

var box = $('.paginationHide');

$('.btnHide').on('click', function () {  
  box.toggleClass('hiddenContent');
});