We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you two Citrix podcasts. Learn about 2020 trends and get answers to your biggest Citrix questions!Listen Now

x

Show/hide multiple divs

dj_humpyg
dj_humpyg asked
on
Medium Priority
844 Views
Last Modified: 2009-02-16
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.
Comment
Watch Question

CERTIFIED EXPERT
Top Expert 2004
Commented:
<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>

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts

Author

Commented:
Extremely fast response, and it works perfectly.

Many thanks :)
CERTIFIED EXPERT
Top Expert 2004

Commented:
No worries :-)  Glad I could help :-)

Good luck with it :-)

Tim
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.