Forum PHP.pl

Jak w temacie.. mam kod, który wyświetla mi diva po kliknięciu, a jak zrobić, żeby chowało diva po ponownym kliknięciu w ten sam link?

[PHP] pobierz, plaintext 
	<script type="text/javascript">
	function pokaz(diw) {
            $("#" + diw).show('slow');
        }
	function schowaj(diw) {
            $("#" + diw).hide('slow');
        }		
	</script>
      <a href="#" onclick="pokaz('test1')">Klik</a>
[PHP] pobierz, plaintext 

jQuery

[HTML] pobierz, plaintext 
<style type="text/css">
		.test{display:none;cursor:pointer}
		.hide{display:none;cursor:pointer}
</style>
 
<span class="show">Pokaż</span>
<span class="hide">Ukryj</span>
<span class="test">bla bla lorem ipsum<span>
 
<script>
    $('.show').click(function(){
		$('.test').show();
		$(this).hide();
		$('.hide').show();
    });
    $('.hide').click(function(){
		$(this).hide();
		$('.show').show();
		$('.test').hide();
	});
</script>
[HTML] pobierz, plaintext 

Poprawione

Ten post edytował Turson 1.11.2013, 19:33:03

a w normalnym odnosniku a href nie da sie jakos?

+ ja potrzebuje podania parametru do funkcji - nazwy diva, bo to nie bedzie tylko jeden odnosnik..

Jak chcesz odnośnik to:

[HTML] pobierz, plaintext 
<a href="#" class="show">Pokaż</a>
[HTML] pobierz, plaintext 

ale nie wiem jaki to ma sens

Ten post edytował boro11 1.11.2013, 22:30:17

odnosnik to pól biedy, najważniejsze jest, żebym parametr do funkcji wprowadzał, żeby nie trzeba było robić 30 funkcji..

boro11 nie zrozumiałeś autora, chodziło mu o to że ma takich linków wiecej
po pierwsze rozwiązanie Turosna można zmodyfikować do 2 lini:

[JAVASCRIPT] pobierz, plaintext 
$( ".show" ).click(function() {
$( ".test" ).toggle( "slow" );
});
[JAVASCRIPT] pobierz, plaintext 

albo jak w manulu zrobić tak:

[JAVASCRIPT] pobierz, plaintext 
if ( showOrHide === true ) {
$( ".test" ).show();
showOrHide = false;
} else if ( showOrHide === false ) {
$( ".test" ).hide();
showOrHide = true;
}
[JAVASCRIPT] pobierz, plaintext 

a jak chcesz zaradzić temu dla wielu linków to pokaż swój kod

Ten post edytował com 1.11.2013, 22:46:24

mój kod był w pierwszym poście:

[PHP] pobierz, plaintext 
 
	function pokaz(diw) {		
		for (n = 1; n <= 30; ++n) {
			$("#info" + n).hide();
		}				
		$("#" + diw).show('slow');	
        }
 
i np.
 
<a href="#" onclick="pokaz('info1');">Klik</a>
 
[PHP] pobierz, plaintext 

po pierwsze jest teraz inny, a ja chcę zobaczyć całą strukturę bo poco mam się produkować dla przykładu, jak od razu moge zrobić to pod Ciebie

Ten post edytował com 1.11.2013, 22:56:37

no ale to nie jest przyklad ;> tak wygląda mój kod.. jest to strona statyczna.. wszystkie linki są wpisane ręcznie, z bazy się nic nie pobiera.

nie rozumiemy się chodzi mi o to co ukrywasz/pokazujesz jaka ma strukturę, żebym mógł się do tego odnieść bo nie wiem czy ma być 10 lików i każdy ukrywać inny element czy jednym ukrywasz kilka itd...

aaa ;> no to jest to:

[PHP] pobierz, plaintext 
<div id="info1" style="display: none;">
		<div class="lewa">
			<div class="limg"><img src="http://www.centrumpapieru.pl/page/data/editor/image/PAPIERY%20TECCO/produktowe_duomatt.jpg" width="200px" height="150px"/></div>
			<div class="lldown"></div>
		</div>
			<div class="infop">
				Dwustronny matowy papier     powlekany. Tecco Duo Matt  staje się świetnym wyborem, kiedy  potrzebujemy    wysokiej  rozdzielczości wydruków reklamowych,  wielkoformatowych i    użytkowych.  Niecodzienną cechą tego papieru jest  możliwość zadruku     dwustronnego, co otwiera całkiem nowe możliwości  przed twórcami reklam.  
					<br/><br/>
				Nie trudno wyobrazić sobie jak dobrze sprawuje się ten papier przy      produkcji wydruków eksponowanych w witrynie, kiedy można go podziwiać od      zewnątrz jak i wewnątrz lokalu.
					<br/><br/>
				Mimo zastosowania typowo produkcyjnego papier charakteryzuje wysoka      rozdzielczość oraz jakość kolorów powalająca również na zastosowania      artystyczne.
			</div>
 
			<div class="ldown">
				- Gramatura: 190gsm <br/>
				- Grubość: 235 &#956;<br/>
				- Wykończenie typu matowego<br/>
				- Szybko schnący<br/>
				- Wysokiej rozdzielczości - do 5760 dpi<br/>
				- 97,5% nieprzeźroczystości<br/>
				- Obustronny<br/>
				- Typ nośnika: Papier<br/>
				- Przeznaczenie: FOTOGRAFIA
			</div>
	</div>
[PHP] pobierz, plaintext 

no prawie doszliśmy do porozumienia tzn zawartość mnie nie interesuje ale samo działanie tak jak opisałem jak to sie ma ukrwac, dlatego spytałem o struktur bo jakbyś mi wkleił kilka plików id="info1" pustych żeby się lepiej czytało i kilka tych linków to bym wiedział co chcesz uzyskać, ale chyba lepiej po prostu mi to opisz słownie...

heh, chodzi o to:

są linki np. Link1 (klikasz w link1 pod tym wysuwa ci sie ten ukryty div)
jezeli klikniesz jeszcze raz w link1 to div sie chowa, jezeli klikniesz w jakis inny link to div pod tym linkiem sie wysuwa kazdy link ma indywidualny div z indywidualną treścią.

dziękówka

aha tylko strona w html5 bo w 4 data-* nie zadziała

Ten post edytował com 1.11.2013, 23:26:55

jak to html? jak mam go 'zainicjowac' bo własnie u mnie nie działa..

mam coś takiego i nie działa..

[PHP] pobierz, plaintext 
<html>
	<head>
		<script type="text/javascript" src="js/jquery-1.4.2.js" ></script>
		<script type="text/javascript">
		    $( "a" ).click(function() {
        var div = $(this).data('div');
    $( "#"+div ).toggle( "slow" );
    });
		</script>
	</head>
 
	<body>
<a href="#" class="show" data-div="info1">Klik</a><br/>
<div id="info1" style="display: none;">aa</div>
<a href="#" class="show" data-div="info2">Klik</a>
<div id="info2" style="display: none;">bb</div>
	</body>
</html>
[PHP] pobierz, plaintext 

Nieaktualne, już działa

Przy okazji wywal te skrypt z head na koniec dokumentu przed znacznik </body>
W html5 wystarczy samo <script> bez type="text/javascript"

Ten post edytował boro11 2.11.2013, 16:37:59