Pomoc przy funkcji ukrywania/pokazywania

0

Witam, zatrzymałem się w pewnym momencie i nie mogę połączyć wątków.
Mam 3 kolumny:

  • w pierwszej jest lista samochodów w której chciałbym aby po kliknięciu pokazywała się reszta kolumn
  • druga kolumna to obraz
  • trzecia kolumna to opis
<div class="row mb-5">

<div class="col-md-3">
  <ul class="flota-ul font-1">
<li class="flota" id="one">Mercedes Benz</li>
<li class="flota" id="two">Mercedes Viano</li>
<li class="flota" id="three">Opel Vivaro</li>
<li class="flota" id="four">Setra 415</li>
<li class="flota" id="five">Setra 515</li>
<li class="flota" id="six">BMW E36</li>
<li class="flota" id="seven">Limuzyna Linco</li>

  </ul>
</div>
<div class="col-md-6">
  <img src="img/bus.png" class="w-100">
</div>


<div class="col-md-3">

<!---- Benz --->

  <div class="benz">
    <h6 class="title-flota">Mercedes Benz</h6>
    <ul class="title-flota-ul">
      <li class="title-flota-li"><i class="fas fa-star-of-life" style="color: green;"></i> Liczba Miejsc: 20+1</li>
      <li class="title-flota-li"><i class="fas fa-star-of-life" style="color: green;"></i> Audio-Video</li>
      <li class="title-flota-li"><i class="fas fa-star-of-life" style="color: green;"></i> Lodówka</li>
      <li class="title-flota-li"><i class="fas fa-star-of-life" style="color: green;"></i> Klimatyzacja</li>
      <li class="title-flota-li"><i class="fas fa-star-of-life" style="color: green;"></i> Pasy bezpieczeństwa</li>
      <li class="title-flota-li"><i class="fas fa-star-of-life" style="color: green;"></i> Mikrofon</li>
      <li class="title-flota-li"><i class="fas fa-star-of-life" style="color: green;"></i> Fotele uchylne z zagłówkami</li>
    </ul>
  </div>  
<!---- Poniżej są takie same divy jak ten o klasie benz--->

<script type="text/javascript">
$( "#one").click(function() {
  $('.benz').show();
});

$( "#two").click(function() {
  $('.viano').show();
  $('.benz').hide();
});

</script>

Wiem że to nie tak ma wyglądać funkcja ale proszę o pomoc, w momencie kliknięcia na li o id np. one chciałbym aby pokazały się dwie pozostałe kolumny czyli obraz i opis. Mam taki efekt po tym:



 $( "#one").click(function() {
  $('.benz').show();
});

Ale chciałbym tak że jak kliknę w inny li o id np. two to żeby te kolumny .o klasie benz znikłya w jego miejsce pojawiła się kolumna z opisem która jest przypisana do id: two

1

Pomysł nad tym, jak byś to zrobił gdybyś miał tam tysiąc marek pojazdow. Będziesz każde id tworzył ręcznie?

Zamiast chować i pokazywać konkretne id, nadaj wymaganym elementom np klasę active. Gdy wykonujesz akcje w pierwszej kolumnie, zabieraj klasę active i nadawaj ja właściwemu elementowi. Zobacz jaka istnieje zależność pomiędzy tymi elementami. W sumie... chyba o to chodzi w programowaniu :)

0
axelbest napisał(a):

Pomysł nad tym, jak byś to zrobił gdybyś miał tam tysiąc marek pojazdow. Będziesz każde id tworzył ręcznie?

Zamiast chować i pokazywać konkretne id, nadaj wymaganym elementom np klasę active. Gdy wykonujesz akcje w pierwszej kolumnie, zabieraj klasę active i nadawaj ja właściwemu elementowi. Zobacz jaka istnieje zależność pomiędzy tymi elementami. W sumie... chyba o to chodzi w programowaniu :)

Mógłbyś dać jakąś mała podpowiedź ? siedzę nad podobnym problemem tylko chodzi o chowanie/pokazywanie tabeli w danym divie i tylko w nim, ilośc tabel jest zależna od tego co przyniesie baza dancyh dlatego uzywanie id odpada.

1 użytkowników online, w tym zalogowanych: 0, gości: 1