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

Aruba Cloud VPS - 50% taniej przez 3 miesiące!
0 głosów
417 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 323 wizyt
pytanie zadane 20 kwietnia 2023 w HTML i CSS przez daras_r1 Nowicjusz (120 p.)
0 głosów
0 odpowiedzi 188 wizyt
+1 głos
1 odpowiedź 236 wizyt

93,195 zapytań

142,211 odpowiedzi

322,061 komentarzy

62,519 pasjonatów

Advent of Code 2024

Top 15 użytkowników

  1. 3316p. - dia-Chann
  2. 3251p. - Łukasz Piwowar
  3. 3243p. - Łukasz Eckert
  4. 3222p. - CC PL
  5. 3167p. - Tomasz Bielak
  6. 3157p. - Łukasz Siedlecki
  7. 3133p. - rucin93
  8. 3110p. - Maurycy W
  9. 3028p. - Adrian Wieprzkowicz
  10. 2992p. - Mikbac
  11. 2490p. - Marcin Putra
  12. 2481p. - Anonim 3619784
  13. 2467p. - Michał Telesz
  14. 2427p. - Michal Drewniak
  15. 1949p. - rafalszastok
Szczegóły i pełne wyniki

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

Wprowadzenie do ITsec, tom 1 Wprowadzenie do ITsec, tom 2

Można już zamawiać dwa tomy książek o ITsec pt. "Wprowadzenie do bezpieczeństwa IT" - mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy aż 15% zniżki! Dziękujemy ekipie Sekuraka za fajny rabat dla naszej Społeczności!

...