Nested Accordion
In Blueprints by Manoela Ilic
A simple, nestable accordion with some examples of nesting levels and a media query.
#accordion
Image Accordion with CSS3
In this tutorial we will create an image accordion that will expand an item on click. Using the sibling combinators and a nested structure we can control the opening of the items/slides with radio buttons.
Accordion with CSS3
In Tutorials by Manoela Ilic
Using hidden inputs and labels, we will create a CSS-only accordion that will animate the content areas on opening and closing.
Flexible Slide-to-top Accordion
In Tutorials by Manoela Ilic
In today’s tutorial we’ll be creating a simple responsive accordion that, when opened, will slide to the top of the viewport and reveal the content by fading it in. The idea is to avoid that the user has to scroll the content area into place. We’ll also add some nice CSS3 transitions for the arrow to appear and to rotate when we click on an item. The accordion will be flexible, meaning that it will have a liquid width adjusting to the screen size.
Vertical Sliding Accordion with jQuery
In Playground by Manoela Ilic
Today we want to share a slick and flexible vertical jQuery accordion with you. The main idea is to expand the accordion slices on click and show some more information. The other slices will become less opaque and squeezed. When navigating to the next slice using one navigation arrows, a new slice will slide in from the top or the bottom. Once a slice is open and we navigate, the subsequent slice will open on slide.
Expanding Image Menu with jQuery
In Tutorials by Manoela Ilic
In today’s tutorial we will create an expanding image menu with jQuery. The idea is to have some columns with black and white image slices that will make a content […]
Elegant Accordion with jQuery and CSS3
In Tutorials by Manoela Ilic
Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to […]