Show first line in table row then expand or collapse on click and change + sign to - sign

Question

This question is similar to How do you show just the first line of text of a div and expand on click? . The answer provided by @thirtydot was http://jsfiddle.net/JUtcX/4/ . My question is how to change + sign to - sign when the line expands, and change - sign to + sign when the line collapses.

$('.expand').each(function(){
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);
    
    $(this).data('reducedHeight', reducedHeight);
    $(this).data('fullHeight', fullHeight);
}).click(function() {
    $(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
});

.expand {
    border: 1px solid red;
    height: 1em;
    padding: 2px;
    overflow: hidden    
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="expand">
<a>[+]</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim metus in accumsan. Maecenas sem augue, placerat commodo convallis non, commodo vel elit. Vestibulum porttitor tortor molestie ligula varius sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, quis aliquam quam vestibulum at.
</div>

score 2 · Accepted Answer · answered Jul 31 '17 at 19:17

You may do it in many ways. This is one:

$('.expand').each(function(){
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);
    
    $(this).data('reducedHeight', reducedHeight);
    $(this).data('fullHeight', fullHeight);
}).click(function() {
    $(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
    $(this).find('.expand_sign, .collapse_sign').toggleClass('hidden');
});

.expand {
    border: 1px solid red;
    height: 1em;
    padding: 2px;
    overflow: hidden    
}
.hidden {
 display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="content" class="expand">
<a class="expand_sign">[+]</a><a class="collapse_sign hidden">[-]</a> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim metus in accumsan. Maecenas sem augue, placerat commodo convallis non, commodo vel elit. Vestibulum porttitor tortor molestie ligula varius sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, quis aliquam quam vestibulum at.
</div>

Jeramiah Harland · Answer 2 · 2017-08-01T17:26:28.833

Like previously mentioned, there are a lot of different ways to do this.

You could use CSS:

.expand {
    border: 1px solid red;
    height: 1em;
    padding: 2px;
    overflow: hidden    
}

.expand a {
    width: 25px;
    text-align: center;
    display: inline-block;
}

.expand a:after {
    content: '[+]';
}

.expand a.open:after {
    content: '[-]';  
}

.hidden {
 display: none;
}

Then just add/remove the class:

$('.expand').each(function(){
    var reducedHeight = $(this).height();
    $(this).css('height', 'auto');
    var fullHeight = $(this).height();
    $(this).height(reducedHeight);

    $(this).data('reducedHeight', reducedHeight);
    $(this).data('fullHeight', fullHeight);
}).click(function() {
    // Get the <a>, check if it has the open class
    // if it does, remove it, if it doesn't, add it
    var $sign = $(this).find('a');
    if($sign.hasClass('open')){
        $sign.removeClass('open');
    }else{
        $sign.addClass('open');
    }
    $(this).animate({height: $(this).height() == $(this).data('reducedHeight') ? $(this).data('fullHeight') : $(this).data('reducedHeight')}, 500);
});

With this answer though you'd remove the hard-coded [+] in your HTML.

Here is a working example.

I don't know what I did wrong, but it is not working :- http://jsfiddle.net/w96mdb3d/ — Coding Enthusiast, Jul 31 '17 at 20:25
It wasn't you it was me :) I forgot that 'content' has to be used with pseudo elements like :before and :after. I updated my answer with a working example on what I was trying to accomplish. — Jeramiah Harland, Aug 01 '17 at 17:24

Show first line in table row then expand or collapse on click and change + sign to - sign

2 Answers2