Changing a part of this hidden/shown text script

[maryb86]

I am using the following coding:

function HideContent(d) {
document.getElementById(d).style.display = "none";
}
function ShowContent(d) {
document.getElementById(d).style.display = "block";
}
function ReverseDisplay(d) {
if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; }
else { document.getElementById(d).style.display = "none"; }
}



<p class="smallcenter"><a href="javascript:ReverseDisplay('01 - 10')">01 - 10</a> | <a href="javascript:ReverseDisplay('11 - 20')">11 - 20</a> | <a href="javascript:ReverseDisplay('21 - 30')">21 - 30</a> | <a href="javascript:ReverseDisplay('31 - 40')">31 - 40</a> | <a href="javascript:ReverseDisplay('41 - 50')">41 - 50</a> | <a href="javascript:ReverseDisplay('51 - 60')">51 - 60</a> | <a href="javascript:ReverseDisplay('61 - 70')">61 - 70</a> | <a href="javascript:ReverseDisplay('71 - 80')">71 - 80</a> | <a href="javascript:ReverseDisplay('81 - 90')">81 - 90</a> | <a href="javascript:ReverseDisplay('91 - 100')">91 - 100</a></p>
<div id="01 - 10" style="display:none;" align="center">
<a href="images/hellokitty/01.jpg" onClick="return(loadPosterImage('images/hellokitty/01.jpg'))">01</a>
<a href="images/hellokitty/02.jpg" onClick="return(loadPosterImage('images/hellokitty/02.jpg'))">02</a>
<a href="images/hellokitty/03.jpg" onClick="return(loadPosterImage('images/hellokitty/03.jpg'))">03</a>
<a href="images/hellokitty/04.jpg" onClick="return(loadPosterImage('images/hellokitty/04.jpg'))">04</a>
<a href="images/hellokitty/05.jpg" onClick="return(loadPosterImage('images/hellokitty/05.jpg'))">05</a>
<a href="images/hellokitty/06.jpg" onClick="return(loadPosterImage('images/hellokitty/06.jpg'))">06</a>
<a href="images/hellokitty/07.jpg" onClick="return(loadPosterImage('images/hellokitty/07.jpg'))">07</a>
<a href="images/hellokitty/08.jpg" onClick="return(loadPosterImage('images/hellokitty/08.jpg'))">08</a>
<a href="images/hellokitty/09.jpg" onClick="return(loadPosterImage('images/hellokitty/09.jpg'))">09</a>
<a href="images/hellokitty/10.jpg" onClick="return(loadPosterImage('images/hellokitty/10.jpg'))">10</a>
</div>
<div id="11 - 20" style="display:none;" align="center">
<a href="images/hellokitty/11.jpg" onClick="return(loadPosterImage('images/hellokitty/11.jpg'))">11</a>
<a href="images/hellokitty/12.jpg" onClick="return(loadPosterImage('images/hellokitty/12.jpg'))">12</a>
<a href="images/hellokitty/13.jpg" onClick="return(loadPosterImage('images/hellokitty/13.jpg'))">13</a>
<a href="images/hellokitty/14.jpg" onClick="return(loadPosterImage('images/hellokitty/14.jpg'))">14</a>
<a href="images/hellokitty/15.jpg" onClick="return(loadPosterImage('images/hellokitty/15.jpg'))">15</a>
<a href="images/hellokitty/16.jpg" onClick="return(loadPosterImage('images/hellokitty/16.jpg'))">16</a>
<a href="images/hellokitty/17.jpg" onClick="return(loadPosterImage('images/hellokitty/17.jpg'))">17</a>
<a href="images/hellokitty/18.jpg" onClick="return(loadPosterImage('images/hellokitty/18.jpg'))">18</a>
<a href="images/hellokitty/19.jpg" onClick="return(loadPosterImage('images/hellokitty/19.jpg'))">19</a>
<a href="images/hellokitty/20.jpg" onClick="return(loadPosterImage('images/hellokitty/20.jpg'))">20</a>
</div>
<div id="21 - 30" style="display:none;" align="center">
<a href="images/hellokitty/21.jpg" onClick="return(loadPosterImage('images/hellokitty/21.jpg'))">21</a>
<a href="images/hellokitty/22.jpg" onClick="return(loadPosterImage('images/hellokitty/22.jpg'))">22</a>
<a href="images/hellokitty/23.jpg" onClick="return(loadPosterImage('images/hellokitty/23.jpg'))">23</a>
<a href="images/hellokitty/24.jpg" onClick="return(loadPosterImage('images/hellokitty/24.jpg'))">24</a>
<a href="images/hellokitty/25.jpg" onClick="return(loadPosterImage('images/hellokitty/25.jpg'))">25</a>
<a href="images/hellokitty/26.jpg" onClick="return(loadPosterImage('images/hellokitty/26.jpg'))">26</a>
<a href="images/hellokitty/27.jpg" onClick="return(loadPosterImage('images/hellokitty/27.jpg'))">27</a>
<a href="images/hellokitty/28.jpg" onClick="return(loadPosterImage('images/hellokitty/28.jpg'))">28</a>
<a href="images/hellokitty/29.jpg" onClick="return(loadPosterImage('images/hellokitty/29.jpg'))">29</a>
<a href="images/hellokitty/30.jpg" onClick="return(loadPosterImage('images/hellokitty/30.jpg'))">30</a>
</div>
<div id="31 - 40" style="display:none;" align="center">
<a href="images/hellokitty/31.jpg" onClick="return(loadPosterImage('images/hellokitty/31.jpg'))">31</a>
<a href="images/hellokitty/32.jpg" onClick="return(loadPosterImage('images/hellokitty/32.jpg'))">32</a>
<a href="images/hellokitty/33.jpg" onClick="return(loadPosterImage('images/hellokitty/33.jpg'))">33</a>
<a href="images/hellokitty/34.jpg" onClick="return(loadPosterImage('images/hellokitty/34.jpg'))">34</a>
<a href="images/hellokitty/35.jpg" onClick="return(loadPosterImage('images/hellokitty/35.jpg'))">35</a>
<a href="images/hellokitty/36.jpg" onClick="return(loadPosterImage('images/hellokitty/36.jpg'))">36</a>
<a href="images/hellokitty/37.jpg" onClick="return(loadPosterImage('images/hellokitty/37.jpg'))">37</a>
<a href="images/hellokitty/38.jpg" onClick="return(loadPosterImage('images/hellokitty/38.jpg'))">38</a>
<a href="images/hellokitty/39.jpg" onClick="return(loadPosterImage('images/hellokitty/39.jpg'))">39</a>
<a href="images/hellokitty/40.jpg" onClick="return(loadPosterImage('images/hellokitty/40.jpg'))">40</a>
</div>
<div id="41 - 50" style="display:none;" align="center">
<a href="images/hellokitty/41.jpg" onClick="return(loadPosterImage('images/hellokitty/41.jpg'))">41</a>
<a href="images/hellokitty/42.jpg" onClick="return(loadPosterImage('images/hellokitty/42.jpg'))">42</a>
<a href="images/hellokitty/43.jpg" onClick="return(loadPosterImage('images/hellokitty/43.jpg'))">43</a>
<a href="images/hellokitty/44.jpg" onClick="return(loadPosterImage('images/hellokitty/44.jpg'))">44</a>
<a href="images/hellokitty/45.jpg" onClick="return(loadPosterImage('images/hellokitty/45.jpg'))">45</a>
<a href="images/hellokitty/46.jpg" onClick="return(loadPosterImage('images/hellokitty/46.jpg'))">46</a>
<a href="images/hellokitty/47.jpg" onClick="return(loadPosterImage('images/hellokitty/47.jpg'))">47</a>
<a href="images/hellokitty/48.jpg" onClick="return(loadPosterImage('images/hellokitty/48.jpg'))">48</a>
<a href="images/hellokitty/49.jpg" onClick="return(loadPosterImage('images/hellokitty/49.jpg'))">49</a>
<a href="images/hellokitty/50.jpg" onClick="return(loadPosterImage('images/hellokitty/50.jpg'))">50</a>
</div>



Those numbers keep going up to 100, but the forum won't let me post that long. You get the picture.

At the moment this creates a line of text showing "0 - 10 | 11- 20 | 21 - 30" etc...
When you click on one of those (e.g. 0 to 10) it shows text that was previously hidden below such as "1 2 3 4 5 6 7 8 9 10". When you click on that same link again the text hides. If you click on a different link though, it just shows it's corresponding line of text underneath the other text that is already showing.

The problem is that I need when you click on a different link on the top line, the text underneath that is already displaying hides and the new text shows.

How would I go about doing this?

[Jon Hanlon]

With this sort of thing, you must loop through and hide all the other divs first, then make your active div visible.
You also need to keep track of the active div.

[maryb86]

How would I go about doing that? I don't know much about javascript sorry. Or would it involve using a completely different script, in which case it would make more sense for me to do a google search?