[jQuery] Hide/show panels Opcje

[peja1990]

Witam.
Mam wielki (jak dla mnie) problem z napisaniem skryptu jQuery, gdyż jestem praktycznie zielony w tej technologii więc BARDZO proszę Was o pomoc.
Mianowicie chcę aby użytkownicy mojego serwisu mogli logować się do poczty, panelu klienta oraz systemu zarządzania (admini) z jednego miejsca i chcę to ładnie zrobić w jQuery.
Wszystko działa prawie super, lecz jest kilka rzeczy, które nie działają tak jakbym tego oczekiwał.
Panel wygląda tak jak na poniższym obrazku:


Chcę zrobić tak aby po kliknięciu w ikonkę panelu klienta (pierwsza z lewej) rozwinął się panel logowania i opis obok ikonki "panel klienta", a gdy inny panel np. poczta e-Mail jest rozwinięty, ma go zwinąć.

No i tak z pozostałymi dwiema ikonkami z tą różnicą, że napis obok ikonki będzie inny i panel logowania będzie zawierał inne pola i opcje.

Dodatkowo chcę aby po kliknięciu w ikonkę dodało jej klasę "check", która odpowiada za kolor ikonki bo naturalnie jest czarno biała gdy nie jest aktywna.
Jeżeli inna ikonka jest aktywna czyli inny panel jest rozwinięty to innej ikonce zabieramy klasę "check" żeby miała czarno-biały kolor.

Aktualnie mój kod wygląda tak:

[HTML] pobierz, plaintext 
<div class="box login space">
  <div class="headline"><span class="panel_logowania"></span></div>
  <script language="JavaScript">
  $(document).ready(
  function() {
    $("#client").click(
    function() {
      $(".form_client").toggle("normal");
    });
  });
  $(document).ready(
  function() {
    $("#webmail").click(
    function() {
      $(".form_webmail").toggle("normal");
    });
  });
  $(document).ready(
  function() {
    $("#system").click(
    function() {
      $(".form_system").toggle("normal");
    });
  });
  </script>
  <div class="type">
    <div class="icon client check" id="client"></div><span class="form_client">panel klienta</span>
    <div class="icon webmail" id="webmail"></div><span class="form_webmail">poczta e-Mail</span>
    <div class="icon system" id="system"></div><span class="form_system">system zarządz.</span>
  </div>
  <div class="form_client">
    <form method="POST">
    <input type="text" name="user" value="ID konta, login lub adres e-Mail">
    <input type="text" name="password" value="Hasło dostępu">
    <div class="foot">
      <div class="options">
        <span>Zapomniane hasło dostępu</span>
        <span>Rejestracja nowego konta</span>
      </div>
      <span class="button">Zaloguj</span>
    </div>
    </form>
  </div>
  <div class="form_webmail">
    <form method="POST">
    <input type="text" name="email" value="adres e-Mail">
    <input type="text" name="password" value="Hasło dostępu">
    <div class="foot">
      <div class="options">
        <span>Zapomniane hasło dostępu</span>
      </div>
      <span class="button">Zaloguj</span>
    </div>
    </form>
  </div>
  <div class="form_system">
    <form method="POST">
    <input type="text" name="admin" value="login lub adres e-Mail">
    <input type="text" name="password" value="Hasło dostępu">
    <div class="foot">
      <div class="options">
        <span>Zapomniane hasło dostępu</span>
      </div>
      <span class="button">Zaloguj</span>
    </div>
    </form>
  </div>
</div>
[HTML] pobierz, plaintext 

Wszystko działa ładnie poza dodaniem/zabraniem klasy "check" ikonkom, no i poza zwinięciem aktywnych paneli po kliknięciu w inną.

Dodatkowe screeny:





Ten ostatni obrazek przedstawia jak wygląda panel po kliknięciu w 2 ikonki.


Mam nadzieję, że wystarczająco opisałem swój problem i liczę na pomoc z Waszej strony, za którą będę niezmiernie wdzięczny !
Za każdą odpowiedź daję POMÓGŁ.

Serdecznie pozdrawiam.

[drozdii07]

Klase mozesz dodac za pomoca .addclass z jquery

[peja1990]

Klase mozesz dodac za pomoca .addclass z jquery

Dzięki, ale już sobie poradziłem Zrobiłem dokładnie tak jak chciałem
Jednak to jQuery jest do ogarnięcia )
Wystarczy chcieć i chwilę posiedzieć

[drozdii07]

Wystarczy czytać dokumentację