I am a beginner with JS - How to make "Load more" button in Javascript only


at the first, sorry for my bad English and maybe wrong use of Javascript code. I’m trying to learn Javascript but it’s long way.

So, I have this HTML code:

<div class="param-filter-single">
   <form method="post">
      <fieldset class="parametric-filter">

           <div class="single-category">One</div>
           <div class="single-category">Two</div>
           <div class="single-category">One</div>
           <div class="single-category">Three</div>
           <div class="single-category">Four</div>
           <div class="single-category">Five</div>
           <div class="single-category">Six</div>
           <div id="Toggle">Show/Hide categories</div>

Now I want to display only 5 divs, rest will be hidden, so I use nth:child selector with display none. Now, I want to use JS to achieve showing rest of them by click on “Show categories”, so I used:

var div = document.getElementById('Toggle');

div.onclick = function() {
    var div = document.getElementByClassName('param-filter);
    if (div.style.display !== 'none') {
        div.style.display = 'none';
    else {
        div.style.display = 'block';

But it doesn’t work (no error in console).

Why? Like I said before, I am not very friendly with JS right now.

Thank you and have nice day! :slight_smile: