Forum PHP.pl > [CSS][HTML][JavaScript] Skrypt JS on click otwierający kilka divów

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [CSS][HTML][JavaScript] Skrypt JS on click otwierający kilka divów

BienuSS

3.11.2017, 17:23:11

Witam jak zrobić żeby funkcja ta :

[HTML] pobierz, plaintext 
<html>
<head>
	 <link rel="stylesheet" href="styles.css"/>
 
<script type="text/javascript">
<!--
function pokazAlboUkryj(co) { 
     var obiekt = document.getElementById(co); 
     if (obiekt.style.display == 'block') { 
          obiekt.style.display = 'none'; 
     } else { 
          obiekt.style.display = 'block'; 
     } 
}
-->
</script>
 
</head>
<body>
 
<a href="#add" onclick="pokazAlboUkryj('add'); return false;">
 
<div id="more"><b>+2</b></div></a></a>
 
<div id="add">
</div>
 
<div id="add2">
</div>
 
</body>
</html>
[HTML] pobierz, plaintext

Po kliknieciu wyswietlała div "add" i "add2" powiem odrazu żeby wrzucić te dwa divy do jednego odpada. Po prostu nie sprawdzi sie to na stronie
Z góry dzięki

viking

3.11.2017, 17:37:26

https://jsfiddle.net/Lpfr9x2e/

BienuSS

3.11.2017, 18:14:53

Dzięki wielkie, dokładnie o to mi chodziło. A jeszcze tylko pytanie czy wiesz jak zrobić żeby div który znajduje sie pod tym z którego wysuwa sie dodatkowe opcje, przesunął sie w dół w raz z pojawieniem sie tych "wysuwanych divów" ?

viking

3.11.2017, 18:40:58

Dopisz CSS do tego.

BienuSS

3.11.2017, 20:03:40

https://jsfiddle.net/Lpfr9x2e/8/

Zamykając tego pierwszego diva "match-box" pod-divy wyswietlaja sie za głównymi divami a jak nie zamkne tego diva to wyswietlaja sie tak jak chce. Aczkolwiek gdy wrzuce juz to na moja strone to gdy nie zamkne tego diva to jest przerwa po miedzy nimi ok 50px.

Dobra działa musiałem zamknąć diva odrazu po hiperłączu "+2" a nie po wszystkich już rozwinięciach

viking

3.11.2017, 20:04:29

Uruchamiasz narzędzia deweloperskie na swojej stronie i patrzysz co to powoduje.

BienuSS

3.11.2017, 23:09:49

Zrobiłem to z twojego przykładu tylko jak zrobić żeby po kliknieciu na 1 rozwijały sie tylko podpunkty z z 1 a nie wszystkie ?
1.
a
b
c
2.
a
b
c
3
a
b
c

EDIT

naprawiłem to zmieniałąc wartość document.getElementById przy kazdym divie

EDIT

A jak w CSS zrobić żeby do każdego diva który zaczyna sie np. od słowa "bleble" przypisać jakąś wartosć?

viking

4.11.2017, 07:01:58

Ja bym ci radził na początek zrobić porządek w samym htmlu. Masz zdecydowanie za dużo id.

BienuSS

4.11.2017, 11:53:36

Divy najłatwiej jest pozycjonować, to pozamieniać id na klasy czy o co dokładnie Ci chodzi?

Zamiast tego :

[HTML] pobierz, plaintext 
	<div id="team1">
						<div id="img-team1"><img src="img/vp.jpg"/></div>
							<div id="team-1">Virtus Pro</div>
								<a href=""><div id="kurs-team1">1.69</div></a>
					</div>
 
[HTML] pobierz, plaintext

Dać to:

[HTML] pobierz, plaintext 
	<div id="team1">
						<img src="img/vp.jpg"/>
							<p>Virtus Pro</p>
								<a href="">1.69</a>
					</div>
 
[HTML] pobierz, plaintext

i w css wpisać tak:

[HTML] pobierz, plaintext 
#team1 
#team1 img
#team1 p
#team 1 a 
[HTML] pobierz, plaintext

viking

4.11.2017, 13:01:24

To z czasem przychodzi. Na razie jest za dużo divów (w sumie tylko one i linki), id nakładane na takie elementy jak more itp. Poczytaj sobie selektory https://www.w3.org/TR/css3-selectors/ a tam gdzie nie trzeba nie dodawaj.

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.