danny taki danny taki - 3 months ago 19
CSS Question

Read more expand text

Trying to remake this effect where the user clicks 'read more' and the bio expands and they can click 'show less' to display partial bio. I thought maybe it was some javascript to display or hide different sections of html. I ripped part of the html and Javascript I thought created this effect and put it into code.pen.io but it didn't work.. What'd I do wrong?

http://www.nealcommunities.com/about/management-team/

My code pen try : http://codepen.io/danieltaki/pen/VjJbkQ

HTML

<li>
<div class="excerpt RTETextWrapper">
<div>
<p>Pat is a conscientious developer, a master builder and the visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p>
<ul>
<li>Florida State Senate 1978-86</li>
<li>Chairman, Senate Appropriations Committee</li>
<li>Chairman, Committee on Natural Resources</li>
<li>Member, Florida House of Representatives, 1974-78</li>
<li>Chair, Florida Commission on Ethics, 2000-01</li>
<li>Chair, Florida Commission on Ethics, 2002</li>
</ul> <a href="#" class="showMore">Read More...</a>
</div>
</div>
<!-- content -->

<div class="content RTETextWrapper">
<div>
<p>Pat is a conscientious developer, master builder and visionary leader of Neal Communities. He is the third generation in his family to be a builder/developer in this community. A graduate of the esteemed Wharton School of Finance, he was a respected member of the Florida Legislature for 12 years, serving our community in the House of Representatives and the Senate, where he was appointed Chairman of the Senate Appropriations Committee. During this time, he was honored with every one of Florida’s top environmental awards. Since 1970, Pat Neal has built more than 10,000 homes with integrity and commitment in the finest communities, and the awards he has earned in his builder developer career continue to complement his political accomplishments. He is a respected leader and inspirational philanthropist. A snapshot of Pat Neal’s accomplishments:</p>
<ul>
<li>Florida State Senate 1978-86</li>
<li>Chairman, Senate Appropriations Committee</li>
<li>Chairman, Committee on Natural Resources</li>
<li>Member, Florida House of Representatives, 1974-78</li>
<li>Chair, Florida Commission on Ethics, 2000-01</li>
<li>Chair, Florida Commission on Ethics, 2002</li>
<li>Sierra Club Legislative Award, 1984</li>
<li>Florida Audubon Society Legislative Award, 1983</li>
<li>Professional Achievement Award, Professional Builder Magazine</li>
<li>Best master Planned Community in the United States (University Park), National Association of Home Builders and Professional Builder Magazine</li>
<li>Hearthstone Builder Public Service Honor Roll, Builder Magazine and Hearthstone Advisors, 2002</li>
<li>Advisory Board, The Trust for Public Land, Florida 2001-2002</li>
<li>Board of Directors, Florida TaxWatch, Inc. 1989, 2000-present</li>
<li>TIGER Award from the Florida Education Association/United 1983</li>
<li>Four-time recipient of the Florida Association of Community Colleges Legislative Service Award</li>
<li>Allen Morris Award for Most Effective Member of the Senate in Committee 1984</li>
<li>Future of the Region Award – Best Community, Tampa Bay Regional Planning Council (University Park)</li>
<li>Ed H. Price Humanitarian Award 2002</li>
<li>John A. Clarke Humanitarian Award 2007</li>
<li>Best Boss, Sarasota Biz941 2007</li>
<li>Community Leadership Award 2008</li>
</ul> <a href="#" class="showLess">...Read Less</a>
</div>
</div>
<!-- content -->
<div class="clear"></div>
</li>
</div>
</div>


Javascript Code

$(function(){
// expand
$('ul .showMore').click(function(){
var $excerpt = $(this).parent().parent();
$excerpt.hide();
$excerpt.next('.content').show();
return false;
});
$('ul .showLess').click(function(){
var $content = $(this).parent().parent();
$content.hide();
$content.prev('.excerpt').show();
return false;
});
$('ul .showMore').text('read more');
$('ul .showLess').text('read less');
});

Answer

You did in fact forget to include jQuery in your CodePen, but additionally, the jQuery that was in place was still not working.

I've learned the hard way that navigating with lots of .parent() calls is not a good way to navigate the DOM.

Here's an Updated CodePen for your reference.

I've only changed two things:

  1. I added the CSS to hide the content by default:

    .content.RTETextWrapper {
        display: none;
    }
    
  2. I modified your jQuery to use a more reliable method of finding the appropriate elements, using closest and find. And, for fun, I threw in some slideUp and slideDown animation:

    // "No-conflict-safe" document ready
    jQuery(function($) {        
        $('a.showMore').click(function() {
            // Go UP the DOM and find the closest parent li, THEN find that li's .excerpt element
            $(this).closest('li').find('.excerpt').slideUp('fast');
            // Go UP the DOM and find the closest parent li, THEN find that li's .content element
            $(this).closest('li').find('.content').slideDown('slow');
            return false;
        });
    
        $('a.showLess').click(function() {
            $(this).closest('li').find('.excerpt').slideDown('slow');
            $(this).closest('li').find('.content').slideUp('fast');
            return false;
        });
    });