Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>Show/Hide more using Vue JS</title>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
</head>
<body>
<div class="jumbotron">
  <div class="container">
    <h1 class="display-4">"Show/Hide more" filters using Vue JS</h1>
    <p class="lead">This is a simple example of how to make a show/hide feature in filters.</p>
  </div>
</div>
<div class="container pt-2 pb-5" id="app">
  <h5 class="text-primary">Simple Filter</h5>
  <h6 class="text-muted">Numbers</h6>
  <ol class="mt-4">
    <li v-for="(filter_item, index) in filter_list" v-if="index < limit_by">
      {{ filter_item }}
    </li>
  </ol>
  <a href="javascript:void(0)" class="mt-1" @click="simple_toggle(default_limit, filter_list.length)">{{ limit_by===3?'Show more': 'Hide more'}}</a>
  <hr>
  <h5 class="text-primary">Dynamic Filters</h5>
  <div class="mt-4" v-for="(filter, fIndex) in dynamic_filters">
    <h6 class="text-muted">{{ filter.title }}</h6>
    <ol class="mt-4">
      <li v-for="(filter_item, index) in filter.list" v-if="index < filter.limit_by">
        {{ filter_item }}
      </li>
    </ol>
    <a href="javascript:void(0)" class="mt-1" @click="dynamic_toggle(fIndex)">{{ limit_by===3?'Show more': 'Hide more'}}</a>
  </div>
</div>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.0.3/vue.js"></script>
​
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
masoomulhaqspro
0viewers