Using .show/.hide with .next causing issues

Question

I am wanting to display the service-specificBar-tab of serviceBarId1 on page load and hide the other tabs, which is working. However, the part that isn't working like I want is when I click on that tab, I want the rest of the other three tabs to show in the order in which the HTML is and then when I click on the first tab again, for tabs 2, 3 and 4 to close. The method I am using now is acting very buggy. When you click on serviceBarId1 to open the tabs, all of the tabs open, but then one disappears - this didn't happen until I added:

$("#serviceBarId1").click(function() {
    $("#serviceBarId2").hide(1000);
    $("#serviceBarId3").hide(1000);
    $("#serviceBarId4").hide(1000);
});

When I try to close the tabs, nothing happens.

What am I doing wrong?

$("#serviceBarId1").addClass("active");
$("#serviceBarId2").hide();
$("#serviceBarId3").hide();
$("#serviceBarId4").hide();
$("#serviceBarId1").click(function() {
    $(".service-specificBar-tab").first().show("fast", function showNext() {
        $(this).next(".service-specificBar-tab").show("fast", showNext);
    });
});
$("#serviceBarId1").click(function() {
    $("#serviceBarId2").hide(1000);
    $("#serviceBarId3").hide(1000);
    $("#serviceBarId4").hide(1000);
});

#gray {
    background: #f9f9f9;
    width: 100%;
    height: 700px;
    position: relative;
}

#service-specificBar-container {
    position: relative;
    top: 50px;
    width: 100%;
    padding: 25px 0;
}

#service-specificBar {
    width: 100%;
    height: 100px;
    position: relevant;
}

.service-specificBar-tab {
    width: 25%;
    height: 100%;
    display: inline-block;
    margin: 0;
    padding: 0px;
    text-align: center;
    font-size: 1.6em;
}

.service-specificBar-tab:nth-child(odd) {
    background: #dbdbdb;
    transition: ease-in-out .3s;
    cursor: pointer;
}

.service-specificBar-tab:nth-child(even) {
    background: #FFF;
    transition: ease-in-out .3s;
    cursor: pointer;
}

#serviceBarId1:hover,
#serviceBarId2:hover,
#serviceBarId3:hover,
#serviceBarId4:hover {
    transition: ease-in-out .3s;
    color: #FFF;
}

#serviceBarId2:hover {
    background: #0085A1;
}

#serviceBarId3:hover {
    background: #a11c00;
}

#serviceBarId4:hover {
    background: #00a16d;
}


/*----Test for page swithces ----*/

#serviceBarId1.active {
    background: #a10085;
    color: #FFF;
}

#serviceBarId2.active {
    background: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="gray">
    <div id="service-specificBar-container">
        <div id="service-specificBar">
            <div class="service-specificBar-tab" id="serviceBarId1">A</div>
            <div class="service-specificBar-tab" id="serviceBarId2">B</div>
            <div class="service-specificBar-tab" id="serviceBarId3">C</div>
            <div class="service-specificBar-tab" id="serviceBarId4">D</div>
        </div>
    </div>
</div>

Answer 1

On the click event you could check the number of visible items. If the length of the visible divs is 1, show the siblings, otherwise, hide them:

$("#serviceBarId1").click(function() {
  if ($('#service-specificBar').find(':visible').length == 1) {
    $(".service-specificBar-tab").first().show("fast", function showNext() {
      $(this).next(".service-specificBar-tab").show("fast", showNext);
    });
  } else {
    $(".service-specificBar-tab").next().hide("fast", function hideNext() {
      $(this).next(".service-specificBar-tab").hide("fast", hideNext);
    });
  }
});

Fiddle Demo