> For the complete documentation index, see [llms.txt](https://eleven-fifty-academy.gitbook.io/javascript-151-api/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://eleven-fifty-academy.gitbook.io/javascript-151-api/03-api-fundamentals/4-apps/01-new-york-times/05-displayresults/05-display-results-part4.md).

# 04-Results Navigation

In this module, we'll add navigation for showing multiple results, if we get more than 10 in our response.

## Adding the Navigation

Add the following code after the `articles` variable in `displayResults`. Note that some code has been omitted from the below code, but you should still keep them in your code (i.e. don't delete the previous code of `article.length === 0`:

```javascript
function displayResults(json) {
  let articles = json.response.docs;

  if(articles.length === 10) {
    nav.style.display = 'block'; //shows the nav display if 10 items are in the array
  } else {
    nav.style.display = 'none'; //hides the nav display if less than 10 items are in the array
  }

};
```

## Analysis

Here we've added an `if-else` that does the following things: 1. We check to see if `articles.length` is greater than 10. If it is, we will set the CSS display to `block`. Notice that we are targeting the `nav` element created in the `nav` variable at the top of the page. Remember that this `nav` variable is targeting the `nav` in our original html file, we have this element:

```markup
     <div class="results">
        <nav>
          <button class="prev">Previous 10</button>
          <button class="next">Next 10</button>
        </nav>

        <section>
        </section>
      </div>
```

Essentially, if we get ten results in the JSON data, it will display the `nav` element in the dom with the two buttons, `Previous 10` & `Next 10`.

If we do not have at least 10 results, we set the CSS display property to `none`. This means, of course, that the buttons won't show. If we only get 7 or 8 results, we don't need buttons to navigate to the next 10 results.

## Screenshot

Here's what you should be seeing now when the results are 10 or more. Note that the buttons will not be functional until later.

![Screenshot](https://1620231560-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-LAU8YfgKP1KuFeflpHx%2F-LAU8dS__8JJXCH5iOwB%2F-LAU8weedVKxcB9AOmPg%2F04.01.05.04-image1.PNG?generation=1524162351418072\&alt=media)