Question

I have this great script that uses jQuery to display a small portion of content & allow the user to read more/read less of the content.
Here is my current Fiddle: http://jsfiddle.net/Tqwdh/1/

Summary: When you click the image, it needs to reveal the additional text.

I would love to know how I can update this script to allow the user to click the associated image and it would display more of the text (as well as keeping the text link in place).

Can someone show me how I can achieve this?

Here is my example HTML:

<article id="post-5" >

            <div class="more-less">    
                <div class="more-block">
                    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed diam purus, lacinia eget placerat sit amet, bibendum nec nisl. Curabitur a mattis ipsum. Praesent quis nisi in purus malesuada rhoncus. Pellentesque ut quam eget libero congue lobortis. Nunc sed quam ac erat lobortis eleifend. Donec elementum sodales cursus. Aliquam porttitor massa nisi, in laoreet turpis. Sed consequat condimentum lorem ut dignissim. Sed hendrerit mauris ut massa fermentum laoreet. Pellentesque a leo vitae enim dictum lobortis. Praesent commodo feugiat velit iaculis malesuada.</p>
                    <p>Phasellus id elit ac lacus faucibus ullamcorper. Etiam ullamcorper pretium tellus, ut pharetra ante pulvinar vel. Sed neque diam, semper vel rhoncus non, congue ut sapien. Integer a mi eget libero elementum lobortis. Donec hendrerit egestas ligula sit amet eleifend. Curabitur pharetra venenatis tempor. Quisque pulvinar malesuada justo, ut euismod arcu pharetra vitae. Cras lobortis, ligula id euismod euismod, ipsum risus varius urna, faucibus gravida lectus mi nec nulla. Fusce eleifend fringilla nibh ut vulputate. Vivamus sagittis leo metus. Etiam facilisis convallis lacus adipiscing hendrerit. Duis ultricies euismod libero, nec blandit est semper a. Phasellus sit amet justo sed quam elementum lobortis. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                </div>
            </div>

            <p>
                <a href="#" title="News Item 1"><img src="http://placehold.it/300x187" alt="News Item 1" width="300" height="187" /></a>
            </p>            

        </article><!-- #post-## -->

and my jQuery:

$(function(){
        // The height of the content block when it's not expanded
        var adjustheight = 130;
        // The "more" link text
        var moreText = "Click to read more...";
        // The "less" link text
        var lessText = "Click to read less...";
        // Sets the .more-block div to the specified height and hides any content that overflows
        $(".more-less .more-block").css('height', adjustheight).css('overflow', 'hidden');
        // The section added to the bottom of the "more-less" div
        $(".more-less").append('<p style="display:block;margin-top:8px"><a href="#" class="adjust"></a></p>');
        $("a.adjust").text(moreText);
        $(".adjust").toggle(function() {
                $(this).parents("div:first").find(".more-block").css('height', 'auto').css('overflow', 'visible');
                // Hide the [...] when expanded
                $(this).parents("div:first").find("p.continued").css('display', 'none');
                $(this).text(lessText);
            }, function() {
                $(this).parents("div:first").find(".more-block").css('height', adjustheight).css('overflow', 'hidden');
                $(this).parents("div:first").find("p.continued").css('display', 'block');
                $(this).text(moreText);
        });
        });

Thank you 🙂

Answer 1

You could just add a click handler to img like this:
DEMO

$(function(){
    $('img').click(function(){
        $(this).closest('article').find('.adjust').click();
    });
});​