[CSS]zależne div-y rozwijalne Opcje

[krzesik]

Witam,

mam dwa divy, które po naciśnięciu się rozwijają:

[HTML] pobierz, plaintext 
    <script type="text/javascript">
function op1(obj) {
x=document.getElementById(obj);
$(x).slideToggle( "slow" );
}
</script>
<div style="margin: 5px 5px 5px 5px; border-radius: 5px; background-color: #009999; font-size:25px; color: yellow; font-weight: bold; padding: 25px 25px 25px 25px; cursor: pointer"
             onclick="op1('poka12')">Przypominajka
             <span class="glyphicon glyphicon-chevron-right" style="float:right;"></span></input>
</div>
<div style="display: none" id="poka12">
<div id="poka12">
.......
</div>
</div>
 
    <script type="text/javascript">
function op2(obj) {
x=document.getElementById(obj);
$(x).slideToggle( "slow" );
}
</script>
<div style="margin: 5px 5px 5px 5px; border-radius: 5px; background-color: #009999; font-size:25px; color: yellow; font-weight: bold; padding: 25px 25px 25px 25px; cursor: pointer"
             onclick="op2('poka11')">Przypominajka 2
             <span class="glyphicon glyphicon-chevron-right" style="float:right;"></span></input>
</div>
<div style="display: none" id="poka11">
<div id="poka11">
.......
</div>
</div>
[HTML] pobierz, plaintext 

jak zrobić, aby nie można było rozwinąć ich jednocześnie? Czyli jeden jest rozwinięty, rozwijając drugi zwija się pierwszy? Nie mogę sobie z tym poradzić.....

[Salvation]

HTML i CSS zostaje jak był. Poniżej JS, który tylko musisz przekleić (i dostosować pod siebie):

[JAVASCRIPT] pobierz, plaintext 
$(document)
  .find(".fake-button")
  .on("click", function () {
    const duration = "slow"
    const id = $(this).data("target");
    const $target = $(document).find(id)
    const $pokas = $(document).find(".poka").not(id)
 
    $pokas.slideUp(duration)
    $target.is(":visible") ? $target.slideUp(duration) : $target.slideDown(duration)
  })
[JAVASCRIPT] pobierz, plaintext 

Demo: https://jsfiddle.net/vp7xr6e8/1/