BLOG

Tag Archives: jquery

Read more jQuery script

Here’s something that I wrote and have since used numerous times on small and large projects. It’s a fairly short read more jQuery script to show / hide text with a super cool slick slide toggle effect. I thought I’d go ahead and share / document it.
JSFIDDLE

HTML

First up is the HTML structure. Simple enough, a containing element .staff-details and the .bio div containing the content to be shown / hidden and a .read-more CTA link which fires the script.

The code is written in such a way so that numerous sections of the HTML code can appear on one page and only the CTA for that particular area of text is fired.

<div class="staff-details">
    <div class="bio">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    Suspendisse efficitur, leo sed rutrum mattis, arcu felis volutpat neque.
    Sit amet finibus enim nibh id elit.
    Praesent leo augue, malesuada at ligula ac, pharetra rutrum metus.
    Aenean cursus tempus pulvinar.
    Aenean.</div>
    <a href="" class="read-more">Read More</a>
</div>

CSS

Next up is the CSS. Again very basic but sufficient for this demonstration. A fixed height and a max-width with overflow set to hidden.

.bio {
    max-width: 300px;
    height: 55px;
    overflow: hidden;
}

jQuery

And the jQuery that makes all the magic happen..!

$(function () {
    var originalHeight = $('.bio').height();
    var originalText = $('.bio').next('.read-more').text();
    $('.read-more').toggle(function () {
        var p = $(this).closest('.staff-details').find('.bio');
        var fullHeight = $(p)[0].scrollHeight;
        p.animate({
            height: fullHeight
        }, 1000, function () {
            // Animation complete.
            $(this).next('.read-more').text('Close');
        });
    }, function () {
        var p = $(this).closest('.staff-details').find('.bio');
        p.animate({
            height: originalHeight
        }, 1000, function () {
            // Animation complete.
            $(this).next('.read-more').text(originalText);
        });
    });
});

The jQuery in more detail

First things first.

Store both the current height of the .bio div and the text in .read-more using:

var originalHeight = $('.bio').height();
var originalText = $('.bio').next('.read-more').text();

We will we need both of these variables later on.

Next we set a listener on the .read-more link so when it is clicked the .toggle event fires. This then grabs the closest .bio div via:

var p = $(this).closest('.staff-details').find('.bio');

We use .closest() here as we don’t want to grab every .bio div on the page, just the one relevant to the link clicked. Read more about jQuery closest here, but in short it does the following.

Description: For each element in the set, get the first element that matches the selector by testing the element itself and traversing up through its ancestors in the DOM tree.

The next line of code stores the height of .bio div in the variable fullHeight via:

var p = $(this).closest('.staff-details').find('.bio');

It is important to grab this value when the .toggle event fires and not before, as this value could vary. Statically (the number of words) or dynamically, the height of the .bio div could change when resizing the page.

Time to Animate!

Once we have the fullHeight we are ready to go. An animation is trigged on the .bio div extending it to the height stored in the variable fullHeight. Once this animation finished the text in the .read-more link is changed to Close via:

$(this).next('.read-more').text('Close');

And back again!

Finally when the .read-more link is clicked for the second time, the .toggle event fires again. This time running the second half of the code setting the .bio div back to its original height and setting the original text back into the .read-more link.

This is where the values stored earlier in originalHeight and originalText come in handy.

Feel free to use / fork the following working demo.
JSFIDDLE

Simple jQuery Slideshow

jquery logo

jQuery Slideshow

A custom built simple jQuery slideshow weighing in at 4 KB. Simply add a list of your images, surround them with a div with an id of #photos and let the jQuery script take care of the rest.

Two types of navigation exist. Buttons are created dynamically depending on the number of photos added and can be used to cycle through the pictures or if you want to enable left and right navigation, add in a couple of span tags, or any other tags for that matter. Just make sure they have id’s of #next and #prev.

Plunker | Github