Google-style Expanding Content Preview Effect With jQuery - Folding Content

File Size: 12.7 KB
Views Total: 4366
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
Google-style Expanding Content Preview Effect With jQuery - Folding Content

A really simple jQuery plugin used for creating a nice folding menu that allows you to open an expanding preview when clicking on a menu item as you've seen on Google Images Search.

See also:

How to use it:

1. Link to the jQuery Folding Content plugin's script at the bottom of your webpage. Make sure you first have the latest version of jQuery included.

<script src="//"></script>
<script src="folding-content.js"></script>

2. Create a folding menu from an unordered html list as shown below.

<ul class="folding-menu">
  <li class="menu-item">
    <a href="#">
      <h3>Folding Menu Item 1</h3>
    <div class="folding-content">
      <h3>Folding Menu Content 1</h3>
  <li class="menu-item">
    <a href="#">
      <h3>Folding Menu Item 2</h3>
    <div class="folding-content">
      <h3>Folding Menu Content 2</h3>
  <li class="menu-item">
    <a href="#">
      <h3>Folding Menu Item 3</h3>
    <div class="folding-content">
      <h3>Folding Menu Content 3</h3>

3. Call the function to initialize the folding menu.

  menuSelector: '.folding-menu',
  menuItemSelector: '.menu-item',
  contentSelector: '.folding-content',
  unfoldBeforeMarkup: '<li>',
  unfoldAfterMarkup: '</li>',
  closeMarkup: '<span class="your-icon-class">X</span>'

4. Style the folding menu whatever you like.

#menu-container a {
  text-decoration: none;
  color: #3498DB;

#menu-container {
  width: 100%;
  min-height: 100%;
  background: #222;
  border: 20px solid #fff;

.folding-menu {
  /* remove inline-block extra spacing */
  font-size: 0;
  padding: 0;

.folding-menu li { list-style-type: none; }

.menu-item {
  text-align: center;
  display: inline-block;
  padding: 50px;
  margin: 20px;
  background: #e0e0e0;
  transition: background 0.3s;
  font-size: 15px;
  vertical-align: top;

.menu-item:hover { background: #e6e6e6; }

.menu-item:after {
  content: '';
  border-top: 0 solid #e6e6e6;

.unfolded-content {
  font-size: 15px;
  background: #ddd;
  padding: 20px;
  box-sizing: border-box;
  position: relative;

.active-item {
  background: #ccc;
  position: relative;

.active-item:after {
  content: '';
  width: 0;
  height: 0;
  position: absolute;
  left: calc( 50% - 40px );
  bottom: -40px;
  border-top: 40px solid #ccc;
  border-right: 40px solid transparent;
  border-bottom: 00px solid transparent;
  border-left: 40px solid transparent;
  z-index: 10;
  transition: border-top-color 0.3s;

.active-item:hover:after { border-top: 40px solid #e6e6e6; }

.close-unfolded-content {
  position: absolute;
  top: 20px;
  right: 20px;
  height: 20px;
  width: 20px;
  text-align: center;
  background: #fff;
  transition: color 0.3s, background 0.3s;

.close-unfolded-content:hover {
  color: #fff;
  background: #444;

.folding-content, .unfolded-content { display: none; }

.unfolded-content { width: 100%; }

.unfolded-content .folding-content { display: block; }

.menu-item:hover, .close-unfolded-content:hover { cursor: pointer; }



  • Fixed for iOS.


  • Add minification and es5 compatibility



  • 1.2 - remove debug code and update readme

This awesome jQuery plugin is developed by palpants. For more Advanced Usages, please check the demo page or visit the official website.