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

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ź

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 , 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.