Home Resources Inline Expansion – Why And Where To Use It

Inline Expansion – Why And Where To Use It

When you hear the words “Inline Expansion” you probably think of a jQuery accordion. In essence that’s correct, but entirely dependant of its functionality. The act of expanding content vertically or horizontally allows us to show important data we’d like our users to pay attention to.

Essentially focus is a critical factor as we only show the user what they want/need to see and the rest is hidden until the user calls upon it. Inline expansion works with hierarchical elements that don’t always require its information to be revealed in specific order.

Working with an inline expansion means you have a primary element followed by secondary elements that are put into play when the user calls upon them. Stay tuned as we plan on dissecting the reasons why we’d use this functionality and where to use it.

Why Use It? (Learning from Google)

Inline Expansion is a simple way to tidy up your content so that it can be delivered in an effective manner without having to compromise functionality. All in all it allows the user to specifically focus on featured content all while having access to the rest of the information with the click of the mouse.

This is directly associated with enhancing the user experience and encouraging the flow of information towards the user. This is one aspect of User Interface design that gives rather than take. Here’s what we mean:

Inline Expand gives the user simplicity, control over elements of design/content, space (less “need” for a cluttered site), more time and an easier way to focus and understand the information at hand.

Over the years Google has been able to pioneer a number of (common) functional elements of design that are in use by millions. Inline Expansion happens to be one of those things. If you’ve ever used Gmail you would’ve noticed that as you compose and reply to an email repetitiously, every email is displayed in the form of an “accordion” that can be expanded at any given time when called upon. This makes it much easier to reply to emails, and reference past ones as well. Ultimately it improves usability and allows for a much better flow of information. It helps you avoid having to go on a “manhunt‘ for an email sent two months ago. Quite handy huh?

When Do We Need It?

Even though Inline Expand is a great way to free up space on your website, this isn’t the only good reason to implement one. Just as useful as this can be, it can also cause harm if not used or done correctly.

So when do we find the “need” to use Inline Expand?

  • When the elements at hand aren’t required to be used continuously by the user
  • where there exists too many features/options that can act as a blockade to the flow of information
  • when it’s not critical to display various elements in a distinct manner
  • wherever you do not wish to obstruct the user’s attention

If you ever need to grab the user’s attention with severity and ease then use a Modal Window where applicable.

Diving In To Its Mechanism

Inline Expand derives from what Jakob Nielsen calls “Progressive Disclosure“.

As you can imagine, the way Inline Expand works is by progressively conveying the right information at the right time when requested by the user. Sending rarely utilized features (as Jakob states) to a secondary screen (a primary element followed by a secondary element) attends to the user’s need for dynamic functions and simplicity. This is achieved because implementing the use of inline expansion will “Offer a larger set of specialized options upon request“. (Nielsen’s Progressive Disclosure 2nd Paragraph)

In essence Inline Expand separates the primary and secondary elements by displaying the most important (primary element) information first, and then naturally displaying the rest (secondary elements). Inline Expand also works by showing a transition effect between these elements that allow the user to notice the change and shift their focus with ease.

One last thing to note: You should always let the user choose between elements without trouble, simply because the user might only need the secondary elements for a short time.

Inline Expand (jQuery) Tutorials

The Showcase


Inline Expansion


Inline Expansion


Inline Expansion


Inline Expansion

Nordnet Bank

Inline Expansion


Inline Expansion


Inline Expansion

78 Design

Inline Expansion


Inline Expansion


Inline Expansion

Your Turn To Talk

I hope you enjoyed this post!

What other websites do you know use Inline Expand to enhance their UI?

Author: Joel Reyes

Joel Reyes is a web designer and developer with years of experience in the industry. He runs a development studio called Looney Designer, a design resource site at GrindSmart.com, and an a free file hosting site for designers, developers and creatives at ShareDen.com.

Leave a Reply

Your email address will not be published. Required fields are marked *

Check Also

Learn Coding to Build Games in 2021

Coding and gaming go hand-in-hand, though that doesn’t mean coders are always gamers and v…