Using jQuery to expand a text box on hover

Let’s say you have limited space on a page so you want to display blocks of content which expand when hovered upon, as shown below. The boxes expand when hovered, with a slight delay when hovering off to aid in usability.

See the Pen Using jQuery to expand a content box on hover by John Brackett (@johnb) on CodePen.

First set up your blocks of content in HTML:

<div class="news">
  <div class="content">
    ... Your content here ...
  </div>
</div>

Add a little sprinkle of CSS:

.news .content{
  float: left;
  height: 100px;
  width: 31%;
  overflow-y: auto;
  padding: 0 1%;
}

And then here’s where the magic happens.. Add the following jQuery:

$('.news').each(function(){
  var t,
      $self = $(this),
      $contentBox = $self.find('.content'),
      newHeight = $contentBox.innerHeight()*3
  
  $self.hover(function(){
      clearTimeout(t);
      $contentBox.stop().animate({
      'height' : newHeight
    }, {
      step: function() {
        $contentBox.css("overflow-y", "auto");
      }
    });
  }, function(){
    clearTimeout(t);
    t=setTimeout(function(){
      $contentBox.stop().animate({
        'height' : 100
      }, {
        step: function() {
          $contentBox.css("overflow-y", "auto");
        }
      });
    }, 300)
  });
 });

2 much appreciated responses...

  1. Thea Quain says:

    We have some old websites, jmarker.com, envisionoptics.com and jetmark.com.

    We are making a help system for a new small embedded printer product. We want a single html file that can be included with our software and that brings up a browser.

    We want a simple set of links/anchors to get to a relevant item in a long list, and then the item opens up with the text explanation.

    Your example shows a good simple approach.

    One of us programs in VB6 (there is a reason), I have very little programming knowledge, I assemble circuit SMT boards for our products. I have Kompozer and Serif5 so I can handle basic HTML files.

    Your instructions seem quite basic and straight forward but I am concerned I will mess up and not get the desired result. In viewing the envision optics site and its help file questions( to give you an idea of the extent of file) is their any further advice or suggestions you would offer. Can I copy and paste your above instructions into my html and add all linked data starting after the …and removing “…your data here…” Do I change “news” or “content”

    Thanks for your help.
    Thea

  2. Thea Quain says:

    OOps sent a comment but should have sent through “get in touch”.
    Sorry. Comment ….. Nice easy to use site and looks like your program and explaination will suit our requirements.
    Thank you.

Feel free to add your comment..

Your email address will not be published.