Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Pokaż / Ukryj
Forum PHP.pl > Forum > Po stronie przeglądarki
GoOx
Witam.

Od dłuższego czasu uczę się HTML'u. Lecz ja dużo nie wnioskuję z pomóc z stron internetowych typu Kurs PHP / JS

Zazwyczaj się uczę na gotowych rzeczach. Ale do rzeczy.

Potrzebne mi tak zwane "Pokaż / Ukryj".

Proszę o pokazanie wszystkiego krok po kroku jeśli to będzie więcej niż 1 plik.
Sephirus
Hmmm mam wrażenie, że nie piszesz po Polsku tongue.gif Opisz dokładniej o co Ci chodzi smile.gif
blooregard
  1. <div id="chowamsieipokazuje" style="display:none;">Jestem albo mnie nie ma</div>
  2. <a id="pokazywacz" onclick="pokazlubukryj(); return false;" href="#">Pokaż</a>
  3. <script type="text/javascript">
  4. var link = document.getElementById('pokazywacz');
  5. var pokazukryj = document.getElementById('chowamsieipokazuje');
  6.  
  7. function pokazlubukryj() {
  8. if (pokazukryj.style.display == "none") {
  9. pokazukryj.style.display = "block";
  10. link.innerHTML = "Ukryj";
  11. }else {
  12. pokazukryj.style.display = "none";
  13. link.innerHTML = "Pokaż";
  14. }
  15. }
  16. </script>


Jedno z miliona rozwiązań, stworzone w 5 minut.

GoOx
Mówię po Polsku ;p

Chcę by był np napis "Audi TT"

I Klikam na ten napis i pokazuje mi się opis niego.

Edit.

blooderard Super o to mi chodziło! Dzięki smile.gif
blooregard
Cytat(GoOx @ 23.11.2011, 16:30:08 ) *
Mówię po Polsku ;p

Chcę by był np napis "Audi TT"

I Klikam na ten napis i pokazuje mi się opis niego.

Edit.

blooderard Super o to mi chodziło! Dzięki smile.gif


BTW używając jQuery nożesz to zrobic dużo prościej - jest tam dedykowana f-cja do tego:

http://api.jquery.com/toggle/
Sephirus
Aaa takie coś tongue.gif sorki nie skumałem - chory jestem to dlatego smile.gif

To dam małą poprawkę od siebie - bardziej uniwesalna jest wink.gif

  1. <a href="java script:;" onclick="showHide(this)">Audi TT</a>
  2. <div style="display:none">
  3. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis <br/>
  4. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis <br/>
  5. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis
  6. </div>
  7.  
  8. <script type="text/javascript">
  9. function showHide(obj)
  10. {
  11. var nextObj = obj.nextSibling;
  12. while(!nextObj.tagName) nextObj = nextObj.nextSibling;
  13.  
  14. nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
  15. }

blooregard
Cytat(Sephirus @ 23.11.2011, 16:38:15 ) *
Aaa takie coś tongue.gif sorki nie skumałem - chory jestem to dlatego smile.gif

To dam małą poprawkę od siebie - bardziej uniwesalna jest wink.gif

  1. <a href="java script:;" onclick="showHide(this)">Audi TT</a>
  2. <div style="display:none">
  3. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis <br/>
  4. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis <br/>
  5. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis
  6. </div>
  7.  
  8. <script type="text/javascript">
  9. function showHide(obj)
  10. {
  11. var nextObj = obj.nextSibling;
  12. while(!nextObj.tagName) nextObj = nextObj.nextSibling;
  13.  
  14. nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
  15. }


Bardziej pro biggrin.gif biggrin.gif biggrin.gif


Nie no, jak najbardziej tak wink.gif

Generalnie chodzi o ideę - dynamiczna zmiana stylu dla elementu poprzez JS.
GoOx
Sephrius Ten pomysł jest bardzo dobry tylko nie może tam być href bo wyrzuca mi jakąś inną stronę i ten test pojawia się i jak załaduje zaraz znika.

Gdy się usunie href jest OK tylko nie ma tego kursora do kliknięcia więc do stylu dodaje się cursor: i np pointer

Poprawka:

  1. <a onclick="showHide(this)" style=" cursor:pointer; ">Audi TT</a>
  2. <div style="display:none">
  3. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis <br/>
  4. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis <br/>
  5. To jest opis To jest opis To jest opis To jest opis To jest opis To jest opis
  6. </div>
  7.  
  8. <script type="text/javascript">
  9. function showHide(obj)
  10. {
  11. var nextObj = obj.nextSibling;
  12. while(!nextObj.tagName) nextObj = nextObj.nextSibling;
  13.  
  14. nextObj.style.display = nextObj.style.display != 'block' ? 'block' : 'none';
  15. }
  16. </script>
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2025 Invision Power Services, Inc.