Archiwum dropdown onclick, Jak utworzyć rozwijane i zwijane archiwum Opcje

[Wielopol]

Witam,
od razu mówię, że praktycznie nie mam pojęcia o javascripcie Chcę zrobić sobie "proste" rozwijane archiwum i próbowałem w css, ale mi się nie udawało, więc planuję spróbować w js, ale o tym już wgl nie mam pojęcia, więc zwracam się z prośbą o pomoc do Was.
Chciałbym, żeby to wyglądało tak, że jest napis "Archiwum" i jak to kliknę, to się pokazuje jakiś tam div, który był dotychczas niewidzialny i zawiera listę miesięcy z archiwum, a jak kliknę drugi raz, to z powrotem znika. Jeżeli potraficie to zrobić w css, to super, jeżeli nie, to też super, jeżeli potraficie w javascripcie

Czekam na pomoc i z góry dziękuję

Ten post edytował Wielopol 18.03.2015, 12:39:51

[trueblue]

https://jsfiddle.net/Lg60b0oh/

[Wielopol]

Super, dzięki wiedziałem, że to musi być proste
A umiałbyś mi pomóc jeszcze z taką kwestią, że mam tę metkę "? Archiwum ?" i chciałbym, żeby przy rozwiniętym archiwum strzałki były w górę. Próbowałem napisać funkcję do tego, ale trochę mi nie wychodzi, teraz wygląda tak:

[HTML] pobierz, plaintext 
function archiwum()
{
	var znak=document.getElementById("metka").value;
 
	if (znak=='? Archiwum ?') document.getElementById("metka").innerHTML="? Archiwum ?";
 
	if (znak=='? Archiwum ?') document.getElementById("metka").innerHTML="? Archiwum ?";
 
}
[HTML] pobierz, plaintext 

tu jeszcze html

[HTML] pobierz, plaintext 
<div id="arch" >
		<input type="checkbox" id="archcheck"/>
		<h2><label for="archcheck" id="metka" onclick="archiwum()">? Archiwum ?</label></h2>
			<div id="archive"><?php wp_get_archives( $args ); ?></div>
		</div>
[HTML] pobierz, plaintext 

Ten post edytował Wielopol 18.03.2015, 13:52:51

[trueblue]

https://jsfiddle.net/Lg60b0oh/1/

http://www.kurshtml.edu.pl/generatory/unicode.html
http://www.fileformat.info/info/unicode/char/2304/index.htm

[Wielopol]

przykro mi to mówić, ale nie działa... Na jsfiddle działa, ale na stronie nie :c

[trueblue]

Na pewno wprowadziłeś zmiany w css? Czyściłeś cache przeglądarki?

[Wielopol]

oto css

[HTML] pobierz, plaintext 
#arch label:after{
    content:'\2193';
}
 
#arch label:before{
    content:'\2193';
}
 
#arch input:checked+label:after{
    content:'\2191';
}
 
#arch input:checked+label:before{
    content:'\2191';
}
[HTML] pobierz, plaintext 

i strzałki w dół przy zwiniętym działają, ale po rozwinięciu archiwum się rozwija, ale strzałki się nie zmieniają

Ten post edytował Wielopol 18.03.2015, 14:27:34

[trueblue]

input:checked label:after
to nie jest to samo co:
input:checked+label:after

[Wielopol]

już zmieniłem, jest tak jak mi napisałeś na początku, po prostu przez przypadek wysłałem Ci ze spacjami pomiędzy, bo próbowałem różnych możliwości, ale pierwotnie było z plusem i też nie działało

Ten post edytował Wielopol 18.03.2015, 14:32:55

[trueblue]

Na jsFiddle działa, https://jsfiddle.net/Lg60b0oh/2/
Może czcionka, które używasz nie ma którychś strzałek. Więcej nie wywróżę.

[Wielopol]

mam, bo próbowałem ustawić same w górę i same w dół i wszystko działa, próbowałem też ustawić zwykłe słowa zamiast strzałek i też nie działa, po prostu css nie rozumie tego. Na jsfiddle działa, a na stronie nie i to mnie najbardziej dziwi.

Ten post edytował Wielopol 18.03.2015, 17:06:39

[trueblue]

[HTML] pobierz, plaintext 
#arch input:checked+h2 label:after{
    content:'\2191';
}
 
#arch input:checked+h2 label:before{
    content:'\2191';
}
[HTML] pobierz, plaintext 

Ale <h2> nie jest do niczego potrzebny, czcionkę można powiększyć tak:

[HTML] pobierz, plaintext 
#arch label{
 font-size:18px;
}
[HTML] pobierz, plaintext 

[Wielopol]

kurde, działa, super, dzięki a wiesz może, dlaczego h2 wszystko psuje?

[trueblue]

div + p Selects all <p> elements that are placed immediately after <div> elements
http://www.w3schools.com/cssref/sel_element_pluss.asp

div p Selects all <p> elements inside <div> elements
http://www.w3schools.com/cssref/sel_element_element.asp