.toggle unrelated divs

by mrjordy

HTML

<div class="HideShowButtons" id="HideShowController1">Show ONE-Net NMCI Integration</div><div class="HideShowButtons" id="HideShowController2">Show Transition</div>
<div id="HideShow1"><a href="https://navy.deps.mil/peoeis/sites/nen/Transition/OneNetInt" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>One-Net / NMCI Internal</span></div>
<p>ONE-Net / NMCI Integration</p>
</div>
</a>

<a href="https://navy.deps.mil/peoeis/sites/nen/Transition/ONENetKeyRefDocs" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>One-Net Key Reference Docs</span></div>
<p>ONE-Net / NMCI Integration</p>
</div>
</a>

<a href="https://navy.deps.mil/peoeis/sites/nen/Transition/ONENET_GOR" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>One-Net GOR Reviews</span></div>
<p>ONE-Net / NMCI Integration</p>
</div>
</a>

<a href="https://navy.deps.mil/peoeis/sites/nen/Transition/ONENET_Gov" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>One-Net Governance</span></div>
<p>ONE-Net / NMCI Integration</p>
</div>
</a>

<a href="https://navy.deps.mil/peoeis/sites/nen/Transition/ONENET_Int" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>One-Net Integration Timeline</span></div>
<p>ONE-Net / NMCI Integration</p>
</div>
</a>

<a href="https://navy.deps.mil/peoeis/sites/nen/Transition/OneNet_Ops" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>One-Net Operational Transformation</span></div>
<p>ONE-Net / NMCI Integration</p>
</div>
</a>

<a href="https://navy.deps.mil/peoeis/sites/nen/Transition/OneNet_SOO" style="text-decoration: none"><div class="ItemBlock"><div class="ItemTitle"><span>One-Net SOO Development</span></div>
<p>ONE-Net / NMCI Integration</p>
</div>
</a>

<a href="https://navy.deps.mil/peoeis/sites/nen/Transition/OneNet_Sub" style="text-decoration: none"><div class="ItemBlock"><div...

CSS

#HideShow1 { 
    display: none;
}
#HideShow2 { 
    display: none;
}
.HideShowButtons {
    height: 36px;
    background: #3E628F;
    border-radius: 2px;
    width: 49%;
    margin: 0 .5% 0 .5%;
    font-size: 20px;
    font-family: helvetica;
    color: white;
    text-align: center;
    padding-top: 6px;
    display: inline-block;
    cursor: pointer;
}
.ms-bodyareacell {
    background: rgb(245, 245, 243)
}
.ItemSection {
    margin-bottom: 10px;
    font-size: 2em;
    height: 30px;
    font-family:"Trebuchet MS", "sans-serif";
    width: 100%;
    background: #3E628F;
    font-weight: bold;
    color: white;
    text-align: center;
    padding-top: 2px;
    display: block;
    opacity: .95;
    box-shadow: 0px 0px 10px #aaa;
    text-shadow: 1px 1px 1px black;
    border-radius: 4px
}
.ItemBlock {
    font-size: 1.2em;
    border-right: #ccc 1px solid;
    width: calc(25% - 13px);
    vertical-align: middle;
    background: white;
    min-width: 180px;
    border-top: #ccc 1px solid;
    border-bottom: #ccc 1px solid;
    margin: 6px 4px;
    min-height: 180px;
    border-left: #ccc 1px solid;
    display: inline-block;
    opacity: .95;
    box-shadow: 0px 0px 4px #aaa;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
    transition: width 0.6s;
}
@media screen and (max-width: 1460px) {
.ItemBlock {
    width: calc(33% - 10px);
}
}
@media screen and (max-width: 1252px) {
.ItemBlock {
    width: calc(50% - 12px);
}
}

.ItemBlock:hover {
    background: rgb(252, 252, 252);
    opacity: .99;
    border: 1px solid #A3C1E7;
    box-shadow: inset 0 0 90px rgba(0, 140, 255, 0.15);
}
.ItemBlock > .ItemTitle {
    height: 36px;
    background: #3E628F;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
.ItemBlock > DIV > SPAN {
    font-size: 20px;
    font-family: helvetica;
    color: white;
    text-align: center;
    padding-top: 6px;
    display: block;
}
.ItemBlock > P {
    font-family:"kalinga", "sans-serif";
   ...

JavaScript

// changes 
$('#HideShowController1').click(function() {
    $('').toggle('#HideShow1');
    $('#HideShow1').toggle('');
});

// changes name of button on click, completely separate from the toggle
$('#HideShowController1').click(function() {
    if ($(this).text() === 'Hide ONE-Net NMCI Integration') {
         $(this).text('Show ONE-Net NMCI Integration');
    }
    else {
        $(this).text('Hide ONE-Net NMCI Integration');
    }
});

// changes 
$('#HideShowController2').click(function() {
    $('').toggle('#HideShow2');
    $('#HideShow2').toggle('');
});

// changes name of button on click, completely separate from the toggle
$('#HideShowController2').click(function() {
    if ($(this).text() === 'Hide Transition') {
         $(this).text('Show Transition');
    }
    else {
        $(this).text('Hide Transition');
    }
});