[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]

Atrybut ID powinien być jeden, unikalny na dany page. Ty masz już co najmniej dwa, które są powtórzone: poka11 i poka12
Kod JS też powinien być jeden, a nie ładowany co <div>, którego chcesz animować.
Zmień ID na CLASS, żeby elementy DOM-u były wg sztuki.

[HTML] pobierz, plaintext 
<div class="fake-button" data-target="#poka12">
  Przypominajka
  <span class="glyphicon glyphicon-chevron-right" style="float: right"></span>
</div>
<div id="poka12" class="poka">
  <div class="poka__container">.......</div>
</div>
<div class="fake-button" data-target="#poka11">
  Przypominajka
  <span class="glyphicon glyphicon-chevron-right" style="float: right"></span>
</div>
<div id="poka11" class="poka">
  <div class="poka__container">.......</div>
</div>
[HTML] pobierz, plaintext 

[CSS] pobierz, plaintext 
.fake-button {
  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;
}
 
.poka {
  display: none;
}
[CSS] pobierz, plaintext 

[JAVASCRIPT] pobierz, plaintext 
$(document)
  .find(".fake-button")
  .on("click", function () {
    const $target = $(document).find($(this).data("target"))
    const $pokas = $(document).find(".poka")
 
    $pokas.slideUp("slow")
    $target.slideDown("slow")
  })
[JAVASCRIPT] pobierz, plaintext 

Demo: https://jsfiddle.net/acL8x2e6/

Ten post edytował Salvation 28.03.2025, 11:00:40

[krzesik]

Tak, to jest prawie to czego potrzebowałem, ale... nie da się zamknąć wcześniej otworzonego panelu, można na to zaradzić?

[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/