Top-Themen

Aktuelle Themen (A bis Z)

Administrator.de FeedbackApache ServerAppleAssemblerAudioAusbildungAuslandBackupBasicBatch & ShellBenchmarksBibliotheken & ToolkitsBlogsCloud-DiensteClusterCMSCPU, RAM, MainboardsCSSC und C++DatenbankenDatenschutzDebianDigitiales FernsehenDNSDrucker und ScannerDSL, VDSLE-BooksE-BusinessE-MailEntwicklungErkennung und -AbwehrExchange ServerFestplatten, SSD, RaidFirewallFlatratesGoogle AndroidGrafikGrafikkarten & MonitoreGroupwareHardwareHosting & HousingHTMLHumor (lol)Hyper-VIconsIDE & EditorenInformationsdiensteInstallationInstant MessagingInternetInternet DomäneniOSISDN & AnaloganschlüsseiTunesJavaJavaScriptKiXtartKVMLAN, WAN, WirelessLinuxLinux DesktopLinux NetzwerkLinux ToolsLinux UserverwaltungLizenzierungMac OS XMicrosoftMicrosoft OfficeMikroTik RouterOSMonitoringMultimediaMultimedia & ZubehörNetzwerkeNetzwerkgrundlagenNetzwerkmanagementNetzwerkprotokolleNotebook & ZubehörNovell NetwareOff TopicOpenOffice, LibreOfficeOutlook & MailPapierkorbPascal und DelphiPeripheriegerätePerlPHPPythonRechtliche FragenRedHat, CentOS, FedoraRouter & RoutingSambaSAN, NAS, DASSchriftartenSchulung & TrainingSEOServerServer-HardwareSicherheitSicherheits-ToolsSicherheitsgrundlagenSolarisSonstige SystemeSoziale NetzwerkeSpeicherkartenStudentenjobs & PraktikumSuche ProjektpartnerSuseSwitche und HubsTipps & TricksTK-Netze & GeräteUbuntuUMTS, EDGE & GPRSUtilitiesVB for ApplicationsVerschlüsselung & ZertifikateVideo & StreamingViren und TrojanerVirtualisierungVisual StudioVmwareVoice over IPWebbrowserWebentwicklungWeiterbildungWindows 7Windows 8Windows 10Windows InstallationWindows MobileWindows NetzwerkWindows ServerWindows SystemdateienWindows ToolsWindows UpdateWindows UserverwaltungWindows VistaWindows XPXenserverXMLZusammenarbeit

gelöst Hide - Show divs innerhalb einer Worpress Seite (mit Elementor, Javascript, css)

Mitglied: FalkIT

FalkIT (Level 1) - Jetzt verbinden

19.05.2019 um 18:28 Uhr, 763 Aufrufe, 3 Kommentare

Hi zusammen,

ich habe eine Wordpress Seite, die mit Elementor gestaltet wird. Als Theme wird Neve verwendet.

Auf einer der Seiten sollen mehrere Produkte präsentiert werden, das ganze soll aussehen wie auf dem angehängten Bild.

Im oberen Bereich Buttons der einzelnen Produkte, der Button des aktuell gezeigtem Produkt in schwarz die anderen in grau.

Durch einen klick auf die unterschiedlichen Produkte, soll sich der Contentbereich ohne Animation entsprechend verändern.
Lösen wollte ich das ganze mit mehreren divs, die per display:none aus- bzw. eingeblendet werden.

Javascript habe ich vor mehreren Jahren zuletzt verwendet, weshalb ich hier aktuell nicht weiterkomme. Ich habe mir diese Anleitung als Leitfaden genommen:
https://html-online.com/articles/simple-popup-box/

Bisher habe ich:
- den HTML Code auf der Seite eingefügt
- Über das "Customize" Menü von Wordpress den CSS Block als zusätzliches CSS hinterlegt
- den javascript Code in die functions.php des Themes geschrieben

Solange ich im "Customize" Bereich bin, wird der die Popup-Box nach klick auf den Link ein- und ausgeblendet. Sobald ich die Seite allerdings einfach aufrufe, passiert nichts, wenn ich auf den Link klicke.

Für Leute die in Javascript fitter sind als ich, ist das wahrscheinlich eine Kleinigkeit, daher meine Frage, ob jemand passenden Code hat (muss auch nicht per js gelöst werden) um ein div bzw. ein Element mit der entsprechenden css Klasse ein und auszublenden?

Den unteren Bereich ab "HEADLINE" würde ich dann in ein eigenes div schreiben, ihm eine Klasse geben und oben entweder Buttons oder HTML Code einfügen.

Ich hoffe ich habe das Problem einigermaßen verständlich beschrieben.

Danke schon mal.

Falk
products - Klicke auf das Bild, um es zu vergrößern
Mitglied: certifiedit.net
19.05.2019 um 19:37 Uhr
Würde dir zu einem Webdesigner raten. Jobbörse oder Zusammenarbeit ist der beste weg.

VG
Bitte warten ..
Mitglied: FalkIT
20.05.2019, aktualisiert um 15:14 Uhr
Moin certifiedit, abgesehen davon, dass es denke ich nicht nötig ist, wird auch kein Webdesigner für einen "Auftrag" der nur daraus besteht ein div ein- & auszublenden überhaupt auf eine Anfrage antworten.

Für alle anderen, die den thread lesen und eine Idee haben:

Ich habe das ganze noch einmal neu geschrieben und jetzt folgendes js:

und folgenden html code:

Dazu einem Button die ID "mein_div" zugewiesen.

Beim ersten Klick auf den Link passiert nichts, danach funktioniert es wie gewünscht.

Wenn jemand mir hier auf die Sprünge helfen kann, wäre ich dafür sehr dankbar.

Gruß
Falk
Bitte warten ..
Mitglied: FalkIT
20.05.2019 um 15:56 Uhr
Problem hat sich gelöst, falls es jemandem hilft:

(Beispiel ist nur für 2 Elemente)

- div 1 ist ID foo zugewiesen
- div 2 ist ID foo2 zugewiesen

javsscript in der functions.php
HTML:
Mit Sicherheit nicht die sauberste Lösung alles aus und dann ein Element wieder einzublenden, aber es tut was es soll.
Bitte warten ..
Ähnliche Inhalte
CSS

Javascript oder CSS Popup mehrfach verwenden

Frage von Jens4everCSS1 Kommentar

Hallo zusammen, es ist wohl eine Anfängerfrage, aber vielleicht helft ihr mir trotzdem. Also: Auf der Suche nach Code ...

Webentwicklung

Suche minimalen portablen Webbrowser mit Javascript+CSS Unterstützung

Frage von bloodstixWebentwicklung3 Kommentare

Hallo zusammen, ich habe für ein Barcode-Scanner (MDE) eine Lösung programmiert, mit der die eingescannten Bestellnummern zusammen mit einer ...

Entwicklung

Seite automatisch wieder ausrichten mit css oder javascript?

Frage von rababar2014Entwicklung2 Kommentare

Moin Entwickler, ich arbeite gerade an einem Projekt und suche nach einer Lösung für folgendes Problem: Ich habe einen ...

Webentwicklung

WP: Elementor Post carousel Images entfernen

Frage von matze2090Webentwicklung1 Kommentar

Hallo, ich nutze für Posts von Elementor den "Post carousel". Das Problem ist, das die "default" Bilder mich stören ...

Neue Wissensbeiträge
Internet

Aktuelle Netzauslastung in Deutschland durch die Covid-19-Pandemie

Information von Frank vor 14 StundenInternet6 Kommentare

Viele Bürger fragen sich, ob die Telekommunikationsnetze während der Covid-19-Pandemie der verstärkten Internetnutzung durch Home Office, eLearning, Videostreaming und ...

iOS

iOS-Bug unterbindet vollständiges VPN-Tunneling

Information von transocean vor 2 TageniOS

Moin, seit dem letzten Update hat iOS für iPhone und iPad ein Problem mit der Verschlüsselung. Lest selbst. Grüße ...

Sicherheit
Corona Malware über manipulierte Router
Information von sabines vor 2 TagenSicherheit

Heise berichtet über Malware, die in Zusammenhang zum Suchethema Corona steht und über DNS Einstellungen bei D-Link und Linksys ...

Windows 10
Windows 10 Update KB4535996 fehlerhaft
Information von Frank vor 2 TagenWindows 101 Kommentar

Laut Microsoft ist das Update KB4535996 die Ursache für aktuelle Verbindungsprobleme bei Virtual Private Networks (VPNs). Microsoft arbeitet bereits ...

Heiß diskutierte Inhalte
KVM
Best Practice für Fileserver auf Proxmox Cluster
gelöst Frage von maichelmannKVM17 Kommentare

Hallo, derzeit laufen in einer Firma, dessen Netzwerk ich betreue, zwei Windows Server Hyper-V Hosts, jeweils mit einem recht ...

Windows Server
DNS Problem Server 2019 unter Win10 Host
Frage von Ketme10Windows Server16 Kommentare

Guten Tag zusammen. Ich bräuchte mal Hilfe. Ich habe Win 10 und Hyper V laufen. Hier habe ich 4 ...

Firewall
PfSense und VLANs mit LAGG
Frage von unique24Firewall13 Kommentare

Hallo, ich habe ein Mikrotik Switch Netzwerk welches über 2 LWL an die pfSense angeschlossen ist pfSense: ixl2 = ...

TK-Netze & Geräte
Netphone APP nimmt kein Kontakt auf
Frage von Finchen961988TK-Netze & Geräte12 Kommentare

Hallo, ich kämfpe mit einem Problem im Bereich Netphone und der Mobil APP. Bei einem Kunden habe ich eine ...