Bootstrap Column filter using Javascript

Question

I have a bootstrap columns as below (4 columns per row and many rows likewise), I need to filter the columns based on the label (General,Movie,Drama,etc...), something like this http://codepen.io/bmodena/pen/Fybdu . I need a javascript to do this. I can change the HTML code also as if required. I am kind of very beginner to JS. Please help

<div class="col-sm-8" style="padding-left:0px;">

<div class="panel panel-primary">
<div class="panel-heading">
                <h1 class="panel-title" style="font-size:20px;">Things</h1>
</div><br>
<div class="panel-body">

    <div class="row" style="padding:10px;">
    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item1.jpg" class="img-responsive" alt="Image">
        <a href="/items1"><br><p><b>Item1</b></a>
    <br><span class="label label-success">Gereral</span>
    </p>
    </div>

    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item2.jpg" class="img-responsive" alt="Image">
        <a href="/items2"><br><p><b>item2</b></a>
    <br><span class="label label-success">Movie</span>
    </p>
    </div>   

    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item3.jpg" class="img-responsive" alt="Image">
        <a href="/items3"><br><p><b>items3</b></a>
    <br><span class="label label-success">Gereral</span>
    </p>
    </div>

    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item4.jpg" class="img-responsive" alt="Image">
        <a href="/items4"><br><p><b>items4</b></a>
    <br><span class="label label-success">Drama</span>
    </p>
    </div>
     </div><br>

    <div class="row">
    <div class="col-xs-5 col-sm-3 col-md-3">
        <img src="/media/item5.jpg" class="img-responsive" alt="Image">
        <a href="/items"><br><p><b>items5</b></a>
    <br><span class="label label-success">NEWS</span>
    </p>
    </div>

     </div> 

</div>
</div>

Ashok Shah · Accepted Answer · 2016-12-19 21:42:05Z

It should be simple using jQuery. Use selector to hide and show.

<div class="col-sm-8" style="padding-left:0px;">

  <div class="panel panel-primary">
    <div class="panel-heading">
      <h1 class="panel-title" style="font-size:20px;">Things</h1>
    </div>
    <br>
    <div class="panel-body">
      <div class="row">
        <div class="col-xs-12">
          <button class="btn btn-info" data-set="all">All</button>
          <button class="btn btn-info" data-set="general">General</button>
          <button class="btn btn-info" data-set="movie">Movie</button>
          <button class="btn btn-info" data-set="news">News</button>
          <button class="btn btn-info" data-set="drama">Drama</button>
        </div>

      </div>
      <hr/>
      <div class="row" style="padding:10px;">
        <div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
          <img src="/media/item1.jpg" class="img-responsive" alt="Image">
          <a href="/items1">
            <br>
            <p><b>Item1</b></a>
          <br><span class="label label-success">Gereral</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="movie">
          <img src="/media/item2.jpg" class="img-responsive" alt="Image">
          <a href="/items2">
            <br>
            <p><b>item2</b></a>
          <br><span class="label label-success">Movie</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="general">
          <img src="/media/item3.jpg" class="img-responsive" alt="Image">
          <a href="/items3">
            <br>
            <p><b>items3</b></a>
          <br><span class="label label-success">Gereral</span>

        </div>

        <div class="col-xs-5 col-sm-3 col-md-3" data-group="drama">
          <img src="/media/item4.jpg" class="img-responsive" alt="Image">
          <a href="/items4">
            <br>
            <p><b>items4</b></a>
          <br><span class="label label-success">Drama</span>

        </div>
      </div>
      <br>

      <div class="row">
        <div class="col-xs-5 col-sm-3 col-md-3" data-group="news">
          <img src="/media/item5.jpg" class="img-responsive" alt="Image">
          <a href="/items">
            <br>
            <p><b>items5</b></a>
          <br><span class="label label-success">NEWS</span>

        </div>

      </div>

    </div>
  </div>


<script>
$(document).ready(function(e) {
  $("[data-set]").click(function(e) {
    if (this.dataset.set == "all") {
      $("[data-group]").show();
      return false;
    }
    var $currentLists = $("[data-group=" + this.dataset.set + "]");
    $("[data-group]").not($currentLists).hide();
    $currentLists.show();
  });
});
</script>

jsfiddle link

Collectives™ on Stack Overflow

Bootstrap Column filter using Javascript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related