triple 'OR' conditional in javascript not functioning as expected

Question

I am trying to hide the #clients div if any of three #-Content other div's are visible.

$('#PE-Content').hide();
    $('#OPS-Content').hide();
    $('#NHS-Content').hide();
    $('#indic_1').hide();


    $('#PE').click(function () {
        $('#indic_1').toggle(400);
        $('#PE-Content').toggle(400);
        $('#OPS-Content').hide();
        $('#NHS-Content').hide();
        $('html, body').animate({
        scrollTop: $("#PE").offset().top
    }, 2000);
    });

    $('#OPS').click(function () {
        $('#OPS-Content').toggle(400);
        $('#PE-Content').hide();
        $('#NHS-Content').hide();
        $('html, body').animate({
        scrollTop: $("#OPS").offset().top
    }, 2000);
    });

    $('#NHS').click(function () {
        $('#NHS-Content').toggle(400);
        $('#PE-Content').hide();
        $('#OPS-Content').hide();
        $('html, body').animate({
        scrollTop: $("#NHS").offset().top
    }, 2000);
    });


    if ($('#NHS-Content').is(':visible') || $('#PE-Content').is(':visible') || $('#OPS-Content').is(':visible')) {
        $('#clients').hide();
    } else  {
        $('#clients').show();
    };

For some reason the #clients div does not hide.

Any ideas welcome!

The html:

<div id="NHS"></div>
<div id="PE"></div>
<div id="OPS"></div>


<div id="NHS-Content"></div>
<div id="PE-Content"></div>
<div id="OPS-Content"></div>

<div class="row" style="margin-top:20px; margin-bottom:20px;" id="clients">
    <?php include ('include/clients.php'); ?>
</div> 

Answer 1

There were two problems:

1. your code was never getting called except on initial page load. You need to call it from your click events that change the visibility of the items you are checking.
2. you had a timer on your toggle, so the item you were hiding/showing wasn't hidden/shown immediately... but the check to see if it was visible would have been done before that was finished. You should use a callback on the toggle to call your code checking visibility

JSFiddle

$('#NHS').click(function () {
    $('#NHS-Content').toggle(400, foo);
    ...
function foo() {
    if ($('#NHS-Content').is(':visible') || $('#PE-Conten ...

---

If you are interested, I cleaned up your code quite a bit (went from 41 to 21 lines) in this example with some minor changes to the dom:

JSFiddle