• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Responsywny accordion nie działa po skopiowaniu gotowego kodu ze strony.

VPS Starter Arubacloud
0 głosów
286 wizyt
pytanie zadane 26 lutego 2016 w HTML i CSS przez szeryf75 Nowicjusz (120 p.)

Witam.
Chciałem przetestować takie rozwiązanie. Wkleiłem kod html, css i js odpowiednio do plików index.html, style.css i script.js, oczywiście zadeklarowałem style.css i script.js w sekcji head pliku index.html.  Zadziałało częściowo, tzn. jest efekt wizualny z css, ale nie działa podświetlanie pól po najechaniu kursorem, ani rozwijanie accordiona realizowane przez js. Proszę o podpowiedź, co mogłem zrobić źle, bo na stronie źródłowej wszystko pięknie działa. Ewentualnie może ktoś przetestuje u siebie ten kod, czy jest poprawny.

1 odpowiedź

+1 głos
odpowiedź 26 lutego 2016 przez jaca121212 Nałogowiec (40,760 p.)
Skrypt kodu umieściłeś w  sekcji head i nie działa tak?

Jeśli tak to ten skrypt wywal z sekcji head i daj go do sekcji body wtedy będzie działał.

Jeśli chodzi o ten plus po lewej stronie to  jest to ikonka tylko nie wiem dokładnie z jakie strony ona jest pobierana, nie ma tam linku do tej strony.
komentarz 27 lutego 2016 przez szeryf75 Nowicjusz (120 p.)
Dzięki za podpowiedź. Przeniesienie skryptu faktycznie pomogło, są drobne różnice w działaniu tzn. oprócz braku ikonki, o której wspomniałeś nie działa jeszcze zmiana odcienia kafelka po najechaniu kursorem myszki.
komentarz 27 lutego 2016 przez Czort Nałogowiec (32,500 p.)

Ten plus to nie jest ikonka. Jest to "+" w pseudoelemencie ::before

.accordionTitle:before, .accordion__Heading:before {
    content: "+";
    font-size: 1.5em;
    line-height: 0.5em;
    float: left;
    transition: transform 0.3s ease-in-out;
}

 

komentarz 27 lutego 2016 przez jaca121212 Nałogowiec (40,760 p.)
Nie patrzyłem wcześniej na style dlatego myślałem że jest to  ikonka.
komentarz 27 lutego 2016 przez jaca121212 Nałogowiec (40,760 p.)
Tutaj masz w pełni działający przykład https://jsfiddle.net/jaca121212/rjaru0gv/1/
komentarz 28 lutego 2016 przez szeryf75 Nowicjusz (120 p.)

Dzięki serdeczne, kod faktycznie działa teraz jak należy smiley, natomiast dla mnie to dopiero połowa sukcesu, chciałem wykorzystać ten kod we własnym module html w joomla, ale nie mogę coś sobie z tym poradzić. Problem opisałem na tutaj. Jak masz jakieś pomysły, to chętnie skorzystam.

Podobne pytania

0 głosów
0 odpowiedzi 154 wizyt
pytanie zadane 20 kwietnia 2023 w HTML i CSS przez daras_r1 Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 162 wizyt
+1 głos
1 odpowiedź 211 wizyt

92,452 zapytań

141,262 odpowiedzi

319,078 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...