generics/expand-results
Result 1
Result 2
Result 3
Result 4
Result 5
Result 6
Result 7
Result 8
Result 9
Result 10
Result 11
Result 12
Result 13
# 🏠 Properties
| Name | Type |
|---|
# 🎰 Slots
| Name | Default value |
|---|
Show Code
<script src="/components/shared/component-base.js"></script>
<script src="/components/expand-results/main.js"></script>
<link rel="stylesheet" href="/components/shared/component-base.css" />
<style>
.extraResult {
display: none;
}
</style>
<div>Result 1</div>
<div>Result 2</div>
<div>Result 3</div>
<div>Result 4</div>
<div>Result 5</div>
<div>Result 6</div>
<div class="extraResult">Result 7</div>
<div class="extraResult">Result 8</div>
<div class="extraResult">Result 9</div>
<div class="extraResult">Result 10</div>
<div class="extraResult">Result 11</div>
<div class="extraResult">Result 12</div>
<div class="extraResult">Result 13</div>
<expand-results id="toggleResults" shown='6' total='13'></expand-results>
<script>
function showMoreResults() {
var results = document.getElementsByClassName('extraResult');
for (var i = 0; i < results.length; i++) {
results[i].style.display = 'block';
}
}
function showFewerResults(){
var results = document.getElementsByClassName('extraResult');
for (var i = 0; i < results.length; i++) {
results[i].style.display = 'none';
}
}
</script>