Zu viel Inhalt und zu wenig Platz? Perfekte Lösung: ein Akkordion zum Aufklappen!

Wie so viele Blogger finde ich sooooo viele Inhalte soooo wichtig, dass diese am besten immer ganz oben stehen sollten. Aber leider ist ein Monitor in der Fläche begrenzt. Und die Mobilgeräte machen es ja noch komplizierter. Und dann sollten die Inhalte auch noch sofort ins Auge stechen. Die Lösung dafür ist ein Akkordion, dass sich elegant per Klick aufklappen lässt.

accordion

Vor allem bei diesem Twenty Fifteen Theme stehe ich vor dem Problem, dass ich viel zu wenig Widgetplätze habe, um alle superwichtigen Inhalte an einer maximal präsenten Stelle zu platzieren. Wie so viele Blogger finde ich sooooo viele Inhalte soooo wichtig, dass diese am besten immer ganz oben stehen sollten. Aber leider ist ein Monitor in der Fläche begrenzt. Und die Mobilgeräte machen es ja noch komplizierter. Und dann sollten die Inhalte auch noch sofort ins Auge stechen. Die Lösung dafür ist ein Akkordion, dass sich elegant per Klick aufklappen lässt. Ich nutze dies beispielsweise per Textwidget in der Sidebar direkt unter dem Logo. https://css-tricks.com/snippets/jquery/simple-jquery-accordion/

Und hier findet ihr das Beispiel, wie ich das Akkordion eingebaut habe:

  1. Der Code für eure footer.php - direkt vor dem abschließenden </body>Tag setzen:
    <script type="text/javascript">(function($) {
     
     var allPanels = $('.accordion > dd').hide();
     
     $('.accordion > dt > a').click(function() {
     $this = $(this);
          $target =  $this.parent().next();
          allPanels.removeClass('active').slideUp();
          if($target.is(':hidden')){
             allPanels.removeClass('active').slideUp();
             $target.addClass('active').slideDown();
          }
          
         return false;
         });
    
    })(jQuery);
    </script>

    Originalscript: https://css-tricks.com/snippets/jquery/simple-jquery-accordion/

  2. Der Code für eure CSS:
    .accordion {background-color:#e0eaf0;}
    .accordion a.akkordion_titel {background-color:#9d8b86 !important; display:block; padding:10px;margin-top:1px; border-bottom:0px !important; color:#fff;}
    .accordion a.akkordion_titel:hover {background-color:#202023 !important;}
    .accordion dd {padding:10px; font-size:13px;}

    (Das ist der Code, den ich auch hier im Template verwendet habe. Ihr könnt die Farben natürlich nach Belieben anpassen)

  3. Der Code für euer Template oder Textwidget
    <dl class="accordion">
    
       <dt><a href="" class="akkordion_titel">Titel 1></a></dt>
       <dd>Hier steht euer Inhalt.....</dd>
    
       <dt><a href="" class="akkordion_titel">Titel 2</a></dt>
       <dd>Hier steht euer Inhalt.....</dd>
    
       <dt><a href="" class="akkordion_titel">Titel 3</a></dt>
       <dd>Hier steht euer Inhalt.....</dd>
    
    </dl>

Die Quelle zu diesem wunderbaren Script ist hier: https://css-tricks.com/snippets/jquery/simple-jquery-accordion/ Die Auflistung der Posts in den Reitern links oben habe ich übrigens mit dem easy-wp-query-generator erstellt, der diese Woche an den Start ging. Damit könnt ihr euch ganz bequem eure Loops generieren - inklusive CSS-Ausgabe - schaut einfach mal rein.

Das könnte dich auch interessieren:






  • About

    aboutHallo, ich heiße Mirjam Schrepler und setze als freiberufliche Grafikerin mit einem wunderbaren Netzwerk Internetseiten und ganzheitliche Marketingprojekte um.

    Auf der Ideenlounge blogge ich über die vielen kleinen Dinge, mit denen ihr euren Blog optisch aufhübschen könnt.

    Ich liebe Wordpress und schlanken Quellcode - und es ist erstaunlich, wie einfach und schnell man viele Plugins durch ein kleines bisschen Quellcode ersetzen kann.

    Tragt euch einfach in den Ideenlounge Style-Club-Newsletter ein, und ihr erhaltet die besten Tipps regelmäßig per Mail.

  • Tolle Insider-Tipps zum Stylen deines Wordpress Content!

    Trage dich einfach in unseren Mailverteiler ein und erhalte das Plugin WGIN-Styles mit dem nächsten Newsletter for free

  • Die 1 Cent pro Klick Formel
  • News von Facebook

  • Basics (3)
    Wie binde ich ein eigenes CSS ein und wie funktioniert das mit dem Childtheme.
  • Code-Schnipsel zum Copy&Paste (14)
    Nützliche CSS-, PHP-, und Javascript-Code-Snippets zum direkten Einbau in euer WP-Theme.
  • Freebies (4)
    Kostenlose Downloads - Icons, Grafiken, Hintergründe, Plugins und vieles mehr.
  • Lesenswertes (1)
    Immer wieder stoße ich auf interessante Blogs, Webseiten oder Bücher - analog und digital - hier meine Favoriten.
  • Blogvorstellungen (1)
    Blogs, deren Design mich einfach umhaut....
  • Ressourcen (1)
    Nützliche Online-Tools, Bildarchive und Code-Generatoren die euch als Blogger den Bloggeralltag erleichtern.
  • Reste-Ecke (7)
    Alles, was nicht wo wirklich in einer der anderen Kategorien passt.
  • Specials (1)
  • Blogverzeichnis - Bloggerei.de
  • FuZo-News per Mail abonnieren Folgt der Ideenlounge auf Facebook. RSS Feed