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>