CODEWITHSUNDEEP
javascriptjqueryhtml
Matie
Matie

Reputation: 181

Filter page content with JQuery

I am trying to build a webpage inspired by this that changes page content based on button decision. I have basic scripts below, but they need some help/logic.

I need help getting the filter part to work for the page's content.

Thank you!

// Change button state - WORKING
$('.category-button').click(function() {
  $('.category-button').removeClass('active')
  $(this).addClass("active")
});


// Filter - NOT WORKING
$('.page-content').hide().first().show() // first bubbles or whatever comes first
// Turn user's choice into a filter
$categoryButton.on('click', function(e) {

  var $category = $(this).data('target');
  $pageContent.hide().filter('.' + $category).show(); // hide all content and then show only filtered

});
body {
  background: #EDE8D1;
}

.hero {
  background: #40838F;
  color: white;
  padding: 50px;
}

.category-button {
  background: #0A1D29;
  padding: 50px;
  color: white;
  text-transform: uppercase;
  font-size: 16px;
}

.active {
  background: #40838F;
}
<!-- BOOTSRAP CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="hero container-fluid text-center">

  <h1>Hello, World!</h1>

</div>


<div class="container text-center">


  <div class="row">
    <h4>Choose a category:</h4>
  </div>
  <!-- end row -->


  <div class="row">

    <!-- Choose Bubbles: -->
    <div class="col-md-4 col-sm-4 col-xs-4">
      <h5 class="category-button" data-target="bubbles">Bubbles</h5>
    </div>
    <!-- end col-md-4 col-sm-4 col-xs-4 -->

    <!-- Choose Trees: -->
    <div class="col-md-4 col-sm-4 col-xs-4">
      <h5 class="category-button" data-target="trees">Trees</h5>
    </div>
    <!-- end col-md-4 col-sm-4 col-xs-4 -->

    <!-- Choose Ocean: -->
    <div class="col-md-4 col-sm-4 col-xs-4">
      <h5 class="category-button" data-target="ocean">Ocean</h5>
    </div>
    <!-- end col-md-4 col-sm-4 col-xs-4 -->


  </div>
  <!-- end row -->

  <div class="row">
    <h4>Your Choice:</h4>
  </div>
  <!-- end row -->


</div>
<!-- end container -->



<!-- BUBBLES PAGE CONTENT -->
<div class="container page-content bubbles">
  <img alt="Picture of bubbles." width="100%" src="https://image.shutterstock.com/z/stock-vector-bubbles-background-223473784.jpg" />
</div>
<!-- end container -->


<!-- TREES PAGE CONTENT -->
<div class="container page-content trees">
  <img alt="Picture of trees." width="100%" src="https://image.shutterstock.com/z/stock-photo-tree-550788622.jpg" />
</div>
<!-- end container -->


<!-- OCEAN PAGE CONTENT -->
<div class="container page-content ocean">
  <img alt="Picture of ocean." width="100%" src="https://image.shutterstock.com/z/stock-photo-dark-blue-ocean-surface-seen-from-underwater-abstract-waves-underwater-and-rays-of-sunlight-582300589.jpg" />
</div>
<!-- end container -->



<!-- JQUERY JS -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

View on CodePen

Upvotes: 1

Views: 1901

Answers (1)

seethrough
seethrough

Reputation: 742

So for the first part I think you need something like this:

 $('.category-button').click(function(){
     $('.category-button').removeClass('active')
     $(this).addClass( "active" )
 });
 $(".category-button:eq(0)").addClass('active') // highlight the first button from the beginning

And the second part is much less code than you got initially. I added images fade in effect, I assume that was what you called filtering effect. 

 $('.page-content').hide().first().show() // first bubbles or whatever comes first
// Turn user's choice into a filter
 var $categoryButton = $('.category-button');
 var $pageContent = $('.page-content');
 $categoryButton.on('click', function(e){

  var $category = $(this).data('target');
  $pageContent
    .hide()
    .find('img').hide()
    .end() // get back to pagecontent from images
    .filter("." + $category)
    .show()
    .find('img').fadeIn(); // hide all content and then show only filtered

});

The codepen

Actually the page you provided as example had that effect for only first time, I assume that is because images were loaded. On second, third etc click they were simply showing up.

Upvotes: 2

Related Questions