• Zur Hauptnavigation springen
  • Skip to main content
  • Zur Hauptsidebar springen
  • Zur Fußzeile springen
MAMEDi  @  Home » Design + WordPress » TABS und AKKORDEON mit jQuery

MAMEDi-Logo MAMEDi

  • Home
  • ! BLOG ?
  • Referenzen
  •   
  • Mediation
  • ? MM !
  • Impressum

TABS und AKKORDEON mit jQuery

4. Oktober 2014 MAMEDi Kommentar schreiben!

Gerade habe ich nach einem Plugin für TABS und ACCORDION (das heißt so, weil es ähnlich wie der Faltmechanismus des „Akkordeons“ funktioniert) gesucht, welches sich mit wenig Aufwand an die Optik (m)eines WordPress-Themes anpassen läßt.

Weil aber die jQuery-Skripte bereits ein fester Bestandteil von WordPress sind, kann man sich sowas natürlich auch selbst zusammenbasteln, wie die beiden folgenden Beispiele zeigen.

1) TABS mit „jQuery“

  • Werkzeug
  • Stilmittel
  • Elemente
  • Struktur
  • Pflege
Mit welchem Content-Management-System (= CMS) läßt sich ein Projekt am einfachsten (neu)gestalten, (um)organisieren und vor allem pflegen? Wie muss ein solides Werkzeug für die Präsentation aussehen.
Auch mit guten CSS-Kenntnissen bekommt man noch lange keinen gepflegten Stil hin. Viel wichtiger ist das richtige Gespür für Farben und Formen und die passende Umgebung für die beabsichtige Anwendung.
Ein wichtiges, oft vernachlässigtes Element ist der Raum zwischen den Informationen. Texte, Bilder, das graphische Beiwerk und Schriften wirken erst mit den richtigen Proportionen zueinander.
Einfach so entsteht keine übersichtliche Struktur, sondern erst durch sinnvolle Aufteilung des Inhaltes in definierte Bereiche und mit Hilfe geeigneter Plugins.
Die Technik liefert eine solide Basis, aber Pflege und Aktualisierung des Inhaltes benötigen ebenfalls Sorgfalt, damit alles aufgeräumt und gut organisiert bleibt.

In diesem Beispiel mit fünf TABS ist der erste ausgewählt, die anderen vier lassen sich per Mausklick öffnen, um den dahinter versteckten Inhalt anzuzeigen. Für kleinere Bildschirme (= Tablets und Smartphones) habe ich das CSS angepasst, damit es verständlicher dargestellt wird.

2) Akkordeon mit „jQuery“

Werkzeug

Mit welchem Content-Management-System (CMS) läßt sich ein Projekt am einfachsten (neu)gestalten, (um)organisieren und vor allem pflegen? Wie muss ein solides Werkzeug für die Präsentation aussehen.

Stilmittel

Auch mit guten CSS-Kenntnissen bekommt man noch lange keinen gepflegten Stil hin. Viel wichtiger ist das richtige Gespür für Farben und Formen und die passende Umgebung für die beabsichtige Anwendung.

Elemente

Ein wichtiges, oft vernachlässigtes Element ist der Raum zwischen den Informationen. Texte, Bilder, das graphische Beiwerk und Schriften wirken erst mit den richtigen Proportionen zueinander.

Struktur

Einfach so entsteht keine übersichtliche Struktur, sondern erst durch sinnvolle Aufteilung des Inhaltes in definierte Bereiche und mit Hilfe geeigneter Plugins.

Pflege

Die Technik liefert eine solide Basis, aber Pflege und Aktualisierung des Inhaltes benötigen ebenfalls Sorgfalt, damit alles aufgeräumt und gut organisiert bleibt.

Dieses Beispiel hat fünf „Akkordeon“-Falten, die sich per Mausklick öffnen lassen und dann ihren Inhalt anzeigen. So ein Akkordeon ist für verschiedene Zwecke eine sehr praktische Angelegenheit und hier natürlich mit den Farben des MAMEDi-Layouts gestaltet.

Tabs und Akkordeon · „Plugin“

Ein Plugin wie „Tabby Responsive Tabs“ von Cubecolour erledigt die Aufgabe auch ziemlich gut, da es je nach Ausgabemedium von den TABS zum ACCORDION wechselt und sich bei Geräten wie Tablets oder Smartphones ab einer gewissen Bildschirmbreite fließend anpasst.

Um die CSS-Klassen für das eigene Theme zu ändern, muss man jedoch zuerst die manchmal recht eigenwilligen Bezeichnungen der Plugin-Programmierer verstehen, weshalb ich in diesem Fall die direkte Lösung mit jQuery vorgezogen habe.

Warum kompliziert, wenn es auch einfach geht!

Design + WordPress jQuery, Plugin, WordPress

Who is „MAMEDi“?

Unter dem programmatischen Akronym „MAMEDi“ schreibt hier der Schlagzeuger, Komponist und Dipl.-Musikpädagoge „Manfred Menke“ (Dinklage) unregelmäßig nach Lust und Laune und garantiert völlig meinungsfrei über alles (Un)Mögliche. Da er für verschiedene Projekte als „Mediengestalter“ tätig ist, befasst sich ein Teil seiner BLOG-Artikel mit Problemen, die bei der Organisation, der Aktualisierung und der Pflege von Internetpräsenzen auftreten können, wobei er grundsätzlich an funktionierenden und praktischen Lösungen interessiert ist.

Homepage: „www.manfred-menke.de“, Projekt: „www.schlagzeug-dinklage.de“

Vorheriger Beitrag: « Zwei Frameworks für WordPress
Nächster Beitrag: Erwach(t) se(i)n »

Leser-Interaktionen

Kommentar schreiben! Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Haupt-Sidebar

Hallo Blog-Leser(in)!

MAMEDi-Logo

Für die Richtigkeit oder den „Wahrheitsgehalt“ der hier bereit gestellten Informationen geben die Autoren keine Gewähr und übernehmen auch keine Haftung für irgendwelche daraus resultierenden Konsequenzen. Deshalb gilt das ironisch formulierte Motto: „Lesen auf eigene Gefahr!“. Oder: „Alles, was hier steht ist wahr, auch wenn's nicht stimmt, ist das klar!“

MAMEDi

SD-Visitenkarte
DEMO-Homepage
! Ach, wie „süss“ ist das denn ?

Kaum zu glauben. Dieser (alte) Zuckertopf ist das letzte Überbleibsel von einem „Kaffeeservice“ meiner Mutter und ist bereits mehr als 60 Jahre alt. Nun ziert er als süßes Favicon die „DEMO“-Homepage.

Die letzten 13 Artikel

  • Zeitenwende · Philosophische Momente
  • Ein frohes, neues Jaaaaahhh!
  • Dynamische Wahrheit
  • Haben wir nicht auch alle Wurzeln?
  • Desinfektion mit Chlordioxid
  • Konzert · Arparimba im Autohaus Ruhe
  • Tschüss Berlingo!
  • Konzert: „Zeitgenössische Musik“ (Dinklage)
  • Herbst im Burgwald Dinklage
  • Unerwünschtes „OSTER“-Feuer am Friedhof
  • Ein Logo für Schlagzeug Dinklage
  • Triomotion begeistert das Publikum
  • Konzert mit „TRIOMOTION“ in Dinklage
Snatakazing

Kategorien

  • Allgemein / Infos (38)
  • Computer + Technik (12)
  • Design + WordPress (39)
  • Ernährung + Umwelt (22)
  • Geh Dichte + Texte (31)
  • Ideen, Leben, Werte (36)
  • Musik + Projekte (33)
  • Politisch – Unkorrekt! (30)
  • Spaß + Humor = Ernst (14)

Strichgesicht @ MAMEDi

MAMEDi-Logo

Diese am 8. März 2009 spontan gekritzelte Bleistiftzeichnung zeigt ein vor Begeistertung leicht schielendes „Strichgesicht“ und ist seit 2014 das Maskottchen dieser Homepage, die anfänglich unter „mmdiesein.de“ firmierte und seit August 2013 unter „MAMEDi“ läuft.

Footer

   
! Datenschutz ?

Kontakt  @  MAMEDi

Fon  (0 44 43) 50 84 54
Mobil  (01 79) 32 56 808
E-Post:  „mail@mamedi.de“

MAMEDi-Schuhe

Web · Projekte

Barfuß gehen ist zwar schön, für manche Wege aber ungeeignet. Deshalb ist gutes Schuhwerk wichtig, um unversehrt ans Ziel zu kommen. Eine Homepage benötigt ebenfalls eine solide Basis. Diese hier wird mit „WordPress“ als Motor angetrieben.

Die letzten 13 Artikel

  • Zeitenwende · Philosophische Momente
  • Ein frohes, neues Jaaaaahhh!
  • Dynamische Wahrheit
  • Haben wir nicht auch alle Wurzeln?
  • Desinfektion mit Chlordioxid
  • Konzert · Arparimba im Autohaus Ruhe
  • Tschüss Berlingo!
  • Konzert: „Zeitgenössische Musik“ (Dinklage)
  • Herbst im Burgwald Dinklage
  • Unerwünschtes „OSTER“-Feuer am Friedhof
  • Ein Logo für Schlagzeug Dinklage
  • Triomotion begeistert das Publikum
  • Konzert mit „TRIOMOTION“ in Dinklage

Über MAMEDi

Logo · MAMEDI.DE Der Name „MAMEDi“ ist das „Akronym“ für „Manfred Menke, Dinklage“ und präsentiere auf dieser Seite u.a. meine Arbeit als Mediengestalter. Dazu gehören Konzeption und Gestaltung von Internetseiten sowie die Erstellung von Drucksachen wie Flyer und Plakate. Das Motto „Lesen auf eigene Gefahr!“ für den BLOG gilt weiterhin.

MM-Homepage

MM-2018-Favicon Wenn ich gerade kein Medium gestalte oder irgendwelche Pixel als „MAMEDi“ hin und her schubse, schlage ich genauso begeistert ganz woanders zu. Ausführliche Informationen zu allen Kompositionen und über meine Aktivitäten im Arbeitsfeld als Schlagzeuger, Komponist und Dipl.-Musikpädagoge gibt es auf meiner „MM“-Homepage, die meine musikalische (Internet)Seite dokumentiert.

Musik: „www.manfred-menke.de“
Vier Pflaumen
  • Home
  • ! BLOG ?
  • Referenzen
  • ? MM !
  • Impressum

MAMEDi  ·  Copyright © 2022  ·  WordPress