Temat: Rozsuwany tekst w dół po kliknięciu

Szukałam i szukałam i wszędzie piszą, że się nie da.
Pomyślałam, że spytam jeszcze Was:

Czy da się w samym css zrobić coś takiego, że po kliknięciu w jakiś krótki tekst nastąpi rozsunięcie/odkrycie w dół dłuższego/ukrytego tekstu?

Wiem, że można to zrobić js - ale mam stronę, której główne menu już działa w ten właśnie sposób (po klikaniu w menu wysuwa się pod nim zawartość wcześniej ukryta). Gdy więc w tekście danej podstrony wklejam dodatkowo kolejny kod js to albo nic nie działa albo rozsuwa się ale widać tylko część tekstu - na taką wysokość na jaką rozwinął się fragment strony po kliknięciu głównego menu..

Temat: Rozsuwany tekst w dół po kliknięciu

Z tego co wiem, to na chwilę obecną tylko js.

Temat: Rozsuwany tekst w dół po kliknięciu

Podobnie jak wyżej - chyba tylko JS.

Co do opisanego działania JS to musisz mieć błędnie napisane skrypty... To że menu już jest w JS nie powinno przeszkadzać w rozwijaniu innych treści.Krystian O. edytował(a) ten post dnia 08.03.10 o godzinie 10:09

Temat: Rozsuwany tekst w dół po kliknięciu

Do rozwijania tekstu można się posłużyć jedną z gotowych bibliotek jQuery.

Oczywiście w CSS można zrobić rozsuwane elementy ale nie znam budowy Twojej strony i tego jakie na niej działają skrypty ale tak jak powiedział kolega prawdopodobnie któryś z nich źle działa.

W samym CSS to nie wyjdzie. :)Dariusz Kryczka edytował(a) ten post dnia 08.03.10 o godzinie 10:01

Temat: Rozsuwany tekst w dół po kliknięciu

Bez animacji i js:
http://www.fofronline.com/experiments/accordion/#two

Temat: Rozsuwany tekst w dół po kliknięciu

Kamil - właśnie o to chodzi. :) Dzięki!
Wypróbuję w praktyce... :)

Temat: Rozsuwany tekst w dół po kliknięciu

Kamil Kuźmiński:
Bez animacji i js:
http://www.fofronline.com/experiments/accordion/#two

Jesli jestes osoba ktora powaznie traktuje sprawy, nie uzywalbym tego. Nie jest w ogole wspierane przez Internet Explorera. Wiec nie powinno byc w ogole rozpatrywane jako rozwiazanie. Nie mowie ze to jest "beee" i "fuuu", ale uzywanie CSS3 narazie nie jest dobrym pomyslem.

Moja sugestia - accordion (mozesz uzyc gotowcoe, masa ich) bazujacy na jQuery.
Bardzo latwy w uzyciu i bedzie dzialac na kazdej przegladarce.
Jedyne co musisz zrobic to na poczatku pliku HTMLowego dolaczyc script jquery w najnowszej wersji - mozesz go sciagnac ze strony jquery.

A potem dolaczyc drugi plik (zalecam na koncu pliku HTML) ktory "przeczyta" strone i zaaplikuje fajnosci ;)

Mozesz uzyc tego kodu:

	$('.mainItemOff').click(function() {

		var checkElement = $(this).children('.mainItemSub');

		if (checkElement) {

			if (!checkElement.is(':visible')) {

				$('.mainItemOff .mainItemSub').hide('fast');

				$(this).children('.mainItemSub').show('fast');

			}

			else {

				$(this).children('.mainItemSub').hide('fast');

			}

		}

	});

- Skrypt szuka wszystkich objektow ktore maja nada klase "mainItemOff"
- i bawi sie tym co jest w srodku z klasa "mainItemSub"

przyklad menu z uzyciem:

<div class="mainItemOn"><a href="#"><span class="mainItemOverlay"></span>Latest Additions</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>Games</a>

							<div class="mainItemSub"><a href="a"><span class="mainItemOverlay"></span>Action</a></div>

							<div class="mainItemSub"><a href="b"><span class="mainItemOverlay"></span>RPG</a></div>

							<div class="mainItemSub"><a href="c"><span class="mainItemOverlay"></span>Racing</a></div>

							<div class="mainItemSub"><a href="#"><span class="mainItemOverlay"></span>Adventure</a></div>

							<div class="mainItemSub"><a href="#"><span class="mainItemOverlay"></span>Killer Action</a></div>

						</div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>Applications</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>Screensavers</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>Hardware</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>Events</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>Cool Stuff</a>

							<div class="mainItemSub"><a href="#"><span class="mainItemOverlay"></span>Action</a></div>

							<div class="mainItemSub"><a href="#"><span class="mainItemOverlay"></span>RPG</a></div>

							<div class="mainItemSub"><a href="#"><span class="mainItemOverlay"></span>Racing</a></div>

							<div class="mainItemSub"><a href="#"><span class="mainItemOverlay"></span>Adventure</a></div>

							<div class="mainItemSub"><a href="#"><span class="mainItemOverlay"></span>Killer Action</a></div>

						</div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>In the Trenches</a></div>

						<div class="hr"></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>PhysX</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>3D Vision</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>CUDA</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>SLI</a></div>

						<div class="mainItemOff"><a href="#"><span class="mainItemOverlay"></span>PureVideo</a></div>

Mam nadzieje ze to chociaz troszke pomoze Ci w rozwiazaniu problemu. Smialo pytaj jesli masz problem z tym kodem. To co podalem wyzej to tylko szybki przyklad, ktory napisalem do stronki nad ktora pracuje, ale moze byc bardzo latwo zmodyfikowany. Pare trikow tam mozna jeszcze zastosowac zeby nie bylo problemow z wyswietlaniem w IE6 (bo jakies moga byc, nie testowalem tego).

ps... te spany z mainItemOVerlay mozesz zignorowac bo jquery robi z tym cos innego ;)Andrzej Winnicki edytował(a) ten post dnia 08.03.10 o godzinie 13:03

Temat: Rozsuwany tekst w dół po kliknięciu

Andrzej Winnicki:

Kamil Kuźmiński:
Bez animacji i js:
http://www.fofronline.com/experiments/accordion/#two

Jesli jestes osoba ktora powaznie traktuje sprawy, nie uzywalbym tego. Nie jest w ogole wspierane przez Internet Explorera. Wiec nie powinno byc w ogole rozpatrywane jako rozwiazanie. Nie mowie ze to jest "beee" i "fuuu", ale uzywanie CSS3 narazie nie jest dobrym pomyslem.

Jasne, że nie używam takich rozwiązań. Ola pytała o akordeon tylko w opraciu o CSS, więc wkleiłem tu przykład :-)

Temat: Rozsuwany tekst w dół po kliknięciu

a może to
http://www.thecssninja.com/css/accordian-effect-using-...

jako ciekawostka
http://www.cssnewbie.com/example/css-only-accordion/ho...

Temat: Rozsuwany tekst w dół po kliknięciu

Andrzej Winnicki:

Moja sugestia - accordion (mozesz uzyc gotowcoe, masa ich) bazujacy na jQuery.

Dzięki Andrzeju. Posiedzę nad tym dzisiaj. :)

Zgadzam się, że jeśli kod nie działa pod IE, to nie ma sensu go używać. Szkoda...

Temat: Rozsuwany tekst w dół po kliknięciu

Aleksandra P.:
Zgadzam się, że jeśli kod nie działa pod IE, to nie ma sensu go używać. Szkoda...

Sugeruje lekko zmodyfikowac skrypt podany wyzej w wypowiedzi
jego modyfikacja jest - na zasadzie co ma sie otwierac itd - dziala praktycznie jak normalne style CSS. jQuery jest proste jesli chodzi o takie podstawowe rzeczy :)

Fakt faktem ze prosilas o rozwiazanie "niejavascriptowe" to dostalas powyzej odpowiedz od Kamila ;) Aczkolwiek to co potrzebujesz, moze byc jednak na JSie i nie stoi nic na przeszkodzie by tak zrobic.Andrzej Winnicki edytował(a) ten post dnia 08.03.10 o godzinie 18:33

Temat: Rozsuwany tekst w dół po kliknięciu

jeszcze jedna metoda działająca bez js i pod IE
http://www.pmob.co.uk/temp/hideandshow3-css.htmKrzysztof Tomasz J. edytował(a) ten post dnia 08.03.10 o godzinie 23:17

Temat: Rozsuwany tekst w dół po kliknięciu

Andrzej Winnicki:

Kamil Kuźmiński:
Bez animacji i js:
http://www.fofronline.com/experiments/accordion/#two

Jesli jestes osoba ktora powaznie traktuje sprawy, nie uzywalbym tego. Nie jest w ogole wspierane przez Internet Explorera.

Dla IE wystarczy prosty skrypt:

$('a[href^=#]').click(function(){

$('.target').removeClass('target');

$(this.hash).addClass('target');

});

I w CSS kopiujesz reguły :target zamieniając :target na .targetPaweł Piskorz edytował(a) ten post dnia 08.11.10 o godzinie 19:22

Temat: Rozsuwany tekst w dół po kliknięciu

Paweł Piskorz:

Andrzej Winnicki:

Kamil Kuźmiński:
Bez animacji i js:
http://www.fofronline.com/experiments/accordion/#two

Jesli jestes osoba ktora powaznie traktuje sprawy, nie uzywalbym tego. Nie jest w ogole wspierane przez Internet Explorera.

Dla IE wystarczy prosty skrypt:

$('a[href^=#]').click(function(){

$('.target').removeClass('target');

$(this).addClass('target');

});

I w CSS kopiujesz reguły :target zamieniając :target na .targetPaweł Piskorz edytował(a) ten post dnia 25.03.10 o godzinie 17:06

pozwolę sobie odkopać...
jestem raczkującym jeżeli chodzi o technologie css, jquery itd.
Możesz rozwinąć jak zrobić aby umieścić powyższy skrypt w htmlu i co zmienić w arkuszu stylów aby działał pod ie ??

Temat: Rozsuwany tekst w dół po kliknięciu

Krzysztof Tomasz Jasiak:
a może to
http://www.thecssninja.com/css/accordian-effect-using-...

jako ciekawostka
http://www.cssnewbie.com/example/css-only-accordion/ho...

A czy dałoby radę ten pierwszy przykład zastosować do tabeli. Mam tabelę z cennikiem, podzieloną asortymentowo. Chciałbym, żeby na początku widoczne były tylko asortymenty (bo tabela jest dość spora), a po kliknięciu w odpowiedni nagłówek rozwijał się wybrany asortyment.

I drugie pytanie, jak to wmontować do wordpressa?
Jestem w te klocki dość zielonkawy.:)