“Show More” Sliding Pane

Demo

This is a short floated item.
This is a floated item.

The inspiration from this came from Amazon’s site where product descriptions have this style of slider.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. Phasellus congue rutrum nisi, in consequat risus adipiscing id. In hac habitasse platea dictumst. Nulla ac quam ligula. Proin euismod mi ut felis viverra tristique. Ut ut auctor diam. Aliquam commodo varius mi, at accumsan mi varius at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. Phasellus congue rutrum nisi, in consequat risus adipiscing id. In hac habitasse platea dictumst. Nulla ac quam ligula. Proin euismod mi ut felis viverra tristique. Ut ut auctor diam. Aliquam commodo varius mi, at accumsan mi varius at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. Phasellus congue rutrum nisi, in consequat risus adipiscing id. In hac habitasse platea dictumst. Nulla ac quam ligula. Proin euismod mi ut felis viverra tristique. Ut ut auctor diam. Aliquam commodo varius mi, at accumsan mi varius at.

Limitations

By default, the “show more” text’s background will cover any floated elements next to it. You will have to give the floats a relative position and a z-index of 2 or higher.

This is a longer floated item.
This is a longer floated item.
This is a longer floated item.
This is a longer floated item.
This is a longer floated item.
This is a longer floated item.
This is a longer floated item.

The inspiration from this came from Amazon’s site where product descriptions have this style of slider.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. Phasellus congue rutrum nisi, in consequat risus adipiscing id. In hac habitasse platea dictumst. Nulla ac quam ligula. Proin euismod mi ut felis viverra tristique. Ut ut auctor diam. Aliquam commodo varius mi, at accumsan mi varius at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. Phasellus congue rutrum nisi, in consequat risus adipiscing id. In hac habitasse platea dictumst. Nulla ac quam ligula. Proin euismod mi ut felis viverra tristique. Ut ut auctor diam. Aliquam commodo varius mi, at accumsan mi varius at.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed euismod mollis molestie. Phasellus congue rutrum nisi, in consequat risus adipiscing id. In hac habitasse platea dictumst. Nulla ac quam ligula. Proin euismod mi ut felis viverra tristique. Ut ut auctor diam. Aliquam commodo varius mi, at accumsan mi varius at.