How would I utilize Javascript to show "pages" of testimonials - so that when clicking a link it shows one set of DIV's and hides the others, thereby allowing me to cycle through content using numbered links. I have attached my code of the basic design, I am just not familiar with how to use JS to actually make it function. In searching SOF all I can find is examples using Jquery scripts, but I do not have a jquery.

The objective is that when you click the "1" link in the top right corner only the blurbs with "1's" will show on the page, same with clicking the "2" link, all the 1's and 3's will disappear and only the blurbs with the 2's will show. 

**CSS**

```
@charset 'utf-8';
/* CSS Document */

body {
    margin-left: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    padding: 0px;
    background-color: #A8A8A8;
    font-size:14px;
    font-family: 'Open Sans', sans-serif;
}

box {
    background-color:#FFFFFF;
    width:950px;
    height:400px;
    margin-left:auto;
    margin-right:auto;
}

.testimonialnavigation {
    width:950px;
    margin-left: auto;
    margin-right: auto;
}

ul.testimonialpages {
    list-style-type: none;
    font-size: 16px;
    font-weight: bold;
    padding-right:30px;
}

.testimonialpages li a {
    float: right;
    color: #FFFFFF;
    text-decoration: none;
    text-align: center;
    margin-left: 5px;
    margin-right: 5px;
    height:30px;
    width:30px;
    line-height:30px;
    background-color:#C82633;
    display:inline-block;
}

.testimonialpages li a:hover {
    color: #FFFFFF;
    background-color: #737373;

}

.testimonials {
    clear:both;
    width:875px;
    margin-top:20px;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:20px;
    background-color:#EDEDED;
    min-height:50px;
    border-radius: 15px;
    padding:15px;
}

.testimonials:nth-of-type(odd) {
    background-color:#D3D3D3;
}

.hidden {
    display:none;
}

```

**HTML**

```
<!doctype html>
<html>
<head>
<meta charset='utf-8'>
<title>Title</title>
<link rel='stylesheet' href='teststyle.css' />
</head>
<body>

<div class="box">                      

    <div class="testimonialnavigation">
        <ul class="testimonialpages">
            <li><a href="" id="page1">3</a></li>
            <li><a href="" id="page2">2</a></li>
            <li><a href="" id="page3">1</a></li>
        </ul>
    </div>

    <br><br>

        <div class="container">

            <div id="content1" class="testimonials">
            <i>
            111111 111111 111111111 11111111111
            </i><br>
            <b>
            - 11111111111
            </b>
            </div>

            <div id="content2" class="testimonials">
            <i>
            11111 111111 1111111 11111111 1111111111
            </i><br>
            <b>
            - 11111111
            </b>
            </div>

            <div id="content3" class="testimonials">
            <i>
            22222 22222222 222222 2222222 222222222
            </i><br>
            <b>
            - 2222222
            </b>
            </div>

            <div id="content4" class="testimonials">
            <i>
            2222222 222222 2222222222 222222 2222222 222222
            </i><br>
            <b>
            - 222222
            </b>
            </div>

            <div id="content5" class="testimonials">
            <i>
            333333 3333333 33333333 33333333 333333 3 33333333 
            </i><br>
            <b>
            - 33333333
            </b>
            </div>

            <div id="content6" class="testimonials">
            <i>
            333333 33333333 333333 333333333333
            </i><br>
            <b>
            - 333333333
            </b>
            </div>

        </div>
</div>

</body>
</html>

```