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.

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.

Die Ideenlounge macht Pause, daher sind aktuell keine neuen KOmmentare möglich. Folgt mir auf Facebook, dann erfahrt ihr, wann es weiter geht.

Das könnte dich auch interessieren:



[shariff backend="on"]
  • Folgt der Ideenlounge auf Facebook. RSS Feed
    Ja, auch diese Webseite verwendet Cookies. Hier erfahrt ihr alles zum Datenschutz