Learn how to a build a cloud-first strategyRegister Now

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 801
  • Last Modified:

Show/hide multiple divs

Hi,
I've got most of the code I need, but missing someand hoping someone may be able to help me. I've got 2 checkboxes, AAA and BBB. When I tick checkbox AAA, I'd like the 3 related divs to be displayed, divs called diva-1, diva-2, diva-3. It's the same with checkbox BBB.

All I have at the moment, is when you click checkbox AAA, then the first div is displayed. I know why, because I'm referencing the div, but not referencing the other 2 divs.

So rather than display diva-1, I'd like someone to help me amend the code so it displays all divs that start "diva" - diva-1, diva-2, diva-3 etc.

Here's the code I have.
-----------------------
<script type="text/javascript">
function showMe (it, box) {
var vis = (box.checked) ? "block" : "none";
document.getElementById(it).style.display = vis;
}
</script>

AAA: <input type="checkbox" value="1" name="chkAAA" onclick="showMe('diva-1', this)">
BBB: <input type="checkbox" value="1" name="chkAAA" onclick="showMe('divb-1', this)">
<br><hr><br>

<div id="diva-1" style="display:none;">
test AAA-1
</div>
<div id="divb-1" style="display:none;">
test BBB-1
</div>

<div id="diva-2" style="display:none;">
test AAA-2
</div>
<div id="divb-2" style="display:none;">
test BBB-2
</div>

<div id="diva-3" style="display:none;">
test AAA-3
</div>
<div id="divb-3" style="display:none;">
test BBB-3
</div>
-----------------------

Thanks.
0
dj_humpyg
Asked:
dj_humpyg
  • 2
1 Solution
 
TimYatesCommented:
<script type="text/javascript">
function showMe (it, box) {
    var vis = (box.checked) ? "block" : "none";
    var i = 1 ;
    var aDiv = document.getElementById( it + '-' + i ) ;
    while( aDiv )
    {
        aDiv.style.display = vis;
        // Try to ge the next div
        i++ ;
        aDiv = document.getElementById( it + '-' + i ) ;
    }
}
</script>

AAA: <input type="checkbox" value="1" name="chkAAA" onclick="showMe('diva', this)">
BBB: <input type="checkbox" value="1" name="chkAAA" onclick="showMe('divb', this)">
<br><hr><br>

<div id="diva-1" style="display:none;">
test AAA-1
</div>
<div id="divb-1" style="display:none;">
test BBB-1
</div>

<div id="diva-2" style="display:none;">
test AAA-2
</div>
<div id="divb-2" style="display:none;">
test BBB-2
</div>

<div id="diva-3" style="display:none;">
test AAA-3
</div>
<div id="divb-3" style="display:none;">
test BBB-3
</div>
0
 
dj_humpygAuthor Commented:
Extremely fast response, and it works perfectly.

Many thanks :)
0
 
TimYatesCommented:
No worries :-)  Glad I could help :-)

Good luck with it :-)

Tim
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now