Accordion - czyli ukryte informacje

Dzisiaj Accordion, czyli nasza harmonijka czy jak to nazwiecie.

Uprzedzam, że aby wrzucić na bloga takie "pseudolinki" potrzeba ciut więcej czasu niż w dotychczasowych instrukcjach, mamy dużo selektorów i o żadnym nie można zapomnieć ( dobra, powiedzmy, że niektóre można po prostu olać, ale tego nie wiecie ode mnie ).

Tak wygląda przykład i pospolity kodzik na to co znajduje się oczywiście wewnątrz. Przykładem jest moja zakładka "Tyler".

Taki ze mnie tajemniczy link...

Przykładowy tekst: Praesent vestibulum eros id dui ultrices euismod. Etiam euismod, est ut fermentum tempus, velit libero consequat libero, vitae dapibus turpis nulla et risus. Vestibulum tempus nisl ut orci aliquam ut auctor justo ornare.

<section class="j-box" style="margin-top: 2px;"><div><input id="j-1" name="accordion-1" type="checkbox" /><label for="j-1">Tyler</label>
<article class="j-1"><a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfyCemNunlKaOxCgF4p2z2FmGoVV1fDd0ThrnaM2qFC3ZNveCZomNUanO7XVVnZXtt0L1JGa9IIXyVfZl64z-bV8-njNWbMm7tdQtD8G8-26hkbq5h3VORBYLrd1rYsIQUyATUrsyj8A/s1600/017.png" imageanchor="1" style="clear: left; float: left; margin-bottom: 1em; margin-right: 1em;"><img border="0" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicfyCemNunlKaOxCgF4p2z2FmGoVV1fDd0ThrnaM2qFC3ZNveCZomNUanO7XVVnZXtt0L1JGa9IIXyVfZl64z-bV8-njNWbMm7tdQtD8G8-26hkbq5h3VORBYLrd1rYsIQUyATUrsyj8A/s1600/017.png" /></a></div> Jednostka aspołeczna, czasem podpadająca pod definicje introwertyka. Potajemnie wzdycha do wszystkich chojraków z przeczytanych książek fantasy.

<span style="color:#ff9b9b;"><b>kontakt: bizarre1309@gmail.com</b></span></article></div></section>

Części oznaczone na czerwono to części konieczne, których nie należy zmieniać. Natomiast czerwone podkreślone zależą od Was, ale o tym więcej za chwile. Niebieski to natomiast wszystko, co znajduje się po kliknięciu na pseudolink.

Pozwolę w poniższej instrukcji użyć swoich modyfikacji i zmian. 
Także zaczynamy. Dodajemy gadżet HTML?/JavaScript, a w nim umieszczamy. 

<section class="j-box" style="margin-top: 2px;">
<div>
<input id="j-3" name="accordion-1" type="checkbox" />
<label for="j-3">Whatever</label>
<article class="j-3">
Tu wpisz swój tekst.
</article></div>
</section>

Tymczasem za nami już troszkę pracy, teraz należy dodać selektory , które ożywią nasze linki. Czyli jednym słowem wchodzimy w Edycje kodu HTML. 

1. To co znajduje się 

<label for="j-3">Whatever</label> to tytuł jak np. Tyler, zamówienia itp.  Modyfikujemy go za pomocą kodu:

.j-box label{font-family:Fjalla One; background-color: #fafafa; text-transform: uppercase; padding: 5px; position: relative; z-index: 0; display: block; cursor: pointer; color: #a3cbcb; font-size: 10px; margin-bottom: 1px; line-height: 100%; letter-spacing: 1px; font-weight: lighter;}

Jego hover dostosować można za pomocą .j-box label:hover, jednak przyznam się że nie używam.

2.Gdy już klikniemy na link i pokaże nam się pole z tekstem, możemy również zmienić wartości naszego tytułu:

.j-box input:checked + label {color: #ff9b9b;}

Tutaj możemy zaobserwować zmianę z niebieskiego koloru na różowy, gdy tylko pokaże nam się tekst.

3.a Teraz dodamy strzałkę czy plusik za pomocą pseudoklasy "after", przez co oszczędzimy sobie zbędnej roboty:

.j-box label:hover:after, .j-box input:checked + label:hover:after{content: ''; position: absolute; font-size: 24px; width: 24px; height: 24px; right: 13px; top: 7px; color: #555; background: transparent url(http://imageshack.us/a/img856/7725/1335651583add.gif) no-repeat top right;}

Tutaj dodajcie tylko własny link, proponuje nie zgłębiać się w resztę składników. Można źle na tym wyjść.

3.b.  Jeśli chcecie zmienić kierunek strzałki przy "chowaniu" się pola tekstowego użyjecie:

.j-box input:checked + label:hover:after{background-image: url(http://imageshack.us/a/img856/7725/1335651583add.gif);}

4. Konieczną rzeczą jest dodanie kodu:

.j-box input{display: none;} 

Nie mam zielonego pojęcia w jaki sposób Wam opisać, po cóż należy tego użyć, ale to należy koniecznie dodać do kodu! Inaczej będzie nieładnie, fe i w ogóle brzydko. Jak ktoś ma pomysł jak to ładnie opisać, to mi napiszcie.

5. Będziemy dostosowywać artykuły, czyli pola tekstowe.

.j-box article{text-align: justify; margin: 10px; margin-top: -1px; margin-bottom: 0px; overflow: hidden; height: 0px; position: relative; z-index:0; transition: height 0.5s ease-in-out; -moz-transition: height 0.5s ease-in-out; -webkit-transition: height 0.5s ease-in-out; -o-transition: height 0.5s ease-in-out;}

Część powyżej sprawi, że pola tekstowe zostaną "zamknięte" i "pozostanie" po nich samo label, czyli nasz tytuł. Transition uruchomi się oczywiście przy otwieraniu i zamykaniu tekstu. I jeszcze mamy:

.j-box input:checked ~ article{margin-top: 10px; margin-bottom: 10px; transition: height 0.5s ease-in-out;  -moz-transition: height 0.5s ease-in-out;  -webkit-transition: height 0.5s ease-in-out; -o-transition: height 0.5s ease-in-out;} 

Ta część informuje jak to ma wyglądać w środku. Proponowane ustawienia to margin czy box-shadow.

6. Dostosowujemy czcionkę i tekst znajdujący się w polu.

.j-box article p {color: #222; font-size: 11px; padding: 5px 0px;} 

7*. To już jest niekoniczne i jest raczej częścią dodatkową, ale możemy jeszcze ustawić linki w "boxach", które będą się różnić od tego co znajduje się "na zewnątrz", czyli w całym blogu.

.j-box a {font-size: 8px; color: #222; letter-spacing: 2px; text-transform: uppercase; padding: 0px 2px; font-family: arial;}

.j-box a:hover {background-color: #fff; color: #000;} 

8. Przechodzimy do najważniejszej części. Musicie pamiętać, że dla każdego artykuły należy ustawić odpowiednią wysokość, aby nie było za dużo pustego miejsca w polu lub też nie urywało nam części tekstu. Na samym początku zauważyliście, że raz użyte było j-1 a raz j-3. To są swego rodzaju nasze artykuły, a ich wysokość ustalamy przy użyciu takich kodów.

.j-box input:checked ~ article.j-1{height: 118px;}.j-box input:checked ~ article.j-3{height: 74px;}

To na tyle, jeśli chodzi o Accordion.

***

Tymczasem jednak wrócę do tego co było na początku. 

Czerwony i podkreślony tekst oznaczał to, że można go modyfikować pod siebie. I tak faktycznie jest, jednak całość tej instrukcji odnosiła się do j-box!Chcąc zmienić całość pod siebie pamiętajcie, że należy to zmienić w całym kodzie! Czyli zamiast j-box możemy dać tyler-box czy gt-box, ale trzeba to zamienić w całym kodzie. Możemy też artykuł j-3; j-1 zamienić na t-2 lub gt-4, tylko należy to pozmieniać we wszystkich odpowiednich miejscach! 

Jesli masz ochote to rozwin!

Oczywiście nie myślcie, że można tego używać tylko i wyłącznie jako widżetu. Harmonijka nadaje się również do postów, różnych galerii szablonów, odpowiedzi na pytania czytelników i tego co tylko Wam przyjdzie do głowy!

***
Mam nadzieję, że wyjaśnione w sposób przystępny, przynajmniej jak na moje możliwości. 

źródło