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, 304 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:

01.
    function toggle_visibility(id) {
02.
       var e = document.getElementById(id);
03.
       if(e.style.display == 'block')
04.
          e.style.display = 'none';
05.
       else
06.
          e.style.display = 'block';
07.
    }
und folgenden html code:

01.
<a class="link" onclick="toggle_visibility('mein_div');">Click here</a>
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
01.
    
02.
function toggle_visibility(id) {
03.
  var e = document.getElementById(id);
04.
  var f = document.getElementById('foo');
05.
  var g = document.getElementById('foo2');
06.

07.
  f.style.display = 'none';
08.
  g.style.display = 'none';
09.
  e.style.display = 'block';
10.
    }
HTML:
01.
<a class="link" onclick="toggle_visibility('foo');">Click 1</a>
02.
<a class="link" onclick="toggle_visibility('foo2');">Click 2</a>
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 ...

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

HTML

CSS 3 - "viewport" Kein gültiges CSS?

gelöst Frage von ukodusHTML2 Kommentare

Hey Leute, gerade hab ich den Code (@viewport { }) durch den CSS-Überprüfer ) durchgejagt und er entgegnete: "Einlese-Fehler ...

CSS

CSS Problem

gelöst Frage von michi1983CSS2 Kommentare

Hallo Admins, eventuell kann mir ja hier einer weiterhelfen, ich stehe offenbar auf der Leitung. Auf folgender Website (die ...

Neue Wissensbeiträge
Microsoft
PowerShell script für LAPS
Information von kgborn vor 1 TagMicrosoft5 Kommentare

Kurzer Hinweis für Admins im AD-Umfeld. Ich bin die Tage auf das PowerShell Script der Woche “Local Administrator Password ...

Windows 10
Windows 10 bis Version 1803 und das Zwangs-Upgrade
Information von kgborn vor 1 TagWindows 10

Ich denke, die meisten Admins hier werden Systeme mit Windows 10 Enterprise einsetzen und Updates per WSUS/SCCM oder ähnlichem ...

Microsoft Office
BSI-Empfehlungen für die Office-Konfiguration
Information von kgborn vor 1 TagMicrosoft Office

Kurze Information für Admins, die Office verwalten. Das BSI hat einige Regeln für die Absicherung von Office-Konfigurationen veröffentlicht. Ich ...

Windows 10

Sandy-Bridge plus Nvidia plus Win10 1903 braucht Hotfix

Information von DerWoWusste vor 5 TagenWindows 101 Kommentar

Es gibt ein Problem in der seltenen Konstellation Nvidia-Grafikkarte/Sandy-Bridge-CPU/Win10v1903: die von Nvidia vorgeschlagenen Treiber lassen sich nicht installieren. verlinkt ...

Heiß diskutierte Inhalte
Windows 10
Windows 10 Logonskript greift nicht
Frage von xbast1xWindows 1019 Kommentare

Hallo zusammen, da sich die per GPO gemappten Laufwerke bei allen Usern schließen und das Problem sich nicht lösen ...

SAN, NAS, DAS
SFP+ 10GB Module kompatibel?
Frage von get--4SAN, NAS, DAS18 Kommentare

Grüße euch alle, ich bin in mehreren Schulen für die EDV verantwortlich. In einer Schule haben wir eine SAN ...

Entwicklung
Welche Programmiersprache ist das?
Frage von DschingisEntwicklung17 Kommentare

Hallo zusammen, unser ERP-System ermöglicht es, eigene Ansichten zu bearbeiten. Ich würde mich hier gerne weiterbilden. Kann mir jamand ...

Batch & Shell
Powershell Skript für Reg Datei ändern
gelöst Frage von SoccerdeluxBatch & Shell16 Kommentare

Hallo zusammen, ich muss auf einem Windows 10 Pc ein Skript ausführen lassen was sich alle 5 Minuten wiederholt. ...