CODEWITHSUNDEEP
jqueryslideup
Tomer W
Tomer W

Reputation: 35

slideUp not working after slideDown

slideUp not working after slideDown using jQuery 1.10. Here's a fiddle: fiddle

The HTML consists of "health-grid-header" li with a corresponding "health-grid-content" and between them a connecting line.

<ul id="health-grid">
    <li class="health-grid-header">
        <div id="health-header-1">
            <p>Lorem Ipsum</p>
        </div>
    </li>
</ul>
<div id="health-grid-container">
    <div id="health-line"></div>
    <div id="health-grid-1" class="health-grid-content">
        <p>Lorem Ipsum<span class="yellow-close-icon"></span>

        </p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
    </div>
</div>

First, I hide the line and the content. Then, when header is clicked I use slideDown to animate and show the content and the line.

var healthGridShowed = false;
$('.health-grid-content, #health-line').hide();
$('.health-grid-header').click(function () {
    // first check if the content is visible //
    if (healthGridShowed) {

    } else {
        // if not visible //
        var newContentIdNum = $(this).children().first().attr('id').slice(-1);
        var lineHalfWidth = $('#health-line').outerWidth();
        var headerPosition = $(this).position();
        var headerHalfWidth = $(this).width() / 2;
        $('#health-line').css({
            left: (headerHalfWidth + headerPosition.left - lineHalfWidth)
        });
        $('#health-line').slideDown(500);
        $('#health-grid-' + newContentIdNum).slideDown(500).delay(500, function () {
            $('#health-grid-' + newContentIdNum).addClass('health-active');
        });
    }
});

The content holds a small x on top right for collapsing the expandable section. Once pressed, should collapse it by using slideUp. Nothing happens though. 

$('.yellow-close-icon').click(function () {
    $('.health-active').slideUp(500, function () {
        $('#health-line').slideUp(500);
    });
});

If I only try sliding up the line it does happen but not the content.

Thanks

Upvotes: 0

Views: 501

Answers (1)

void
void

Reputation: 36703

The part where you were adding the class health-active, I changed it to

$('#health-grid-' + newContentIdNum).addClass('health-active').slideDown(500);

Or you can also write it like

$('#health-grid-' + newContentIdNum).slideDown(500, function(){
$(this).addClass('health-active');
});

If you want to addClass after fadeOut() Completes.

And it is working. You were unnecesarily using .delay

Working Fiddle

Upvotes: 1

Related Questions