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/
<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/
.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)
<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.
Tags: Code-Snippet, CSS