CODEWITHSUNDEEP
javascriptjquerycss
J82
J82

Reputation: 8457

How do I get rid of this jump on slideToggle()?

When I click on the "Details [+]" text, there is a slight jump. How can I get rid of this?

HTML

<div class="slide-caption"><strong>The Catwalk</strong><hr><em>Holmby Hills, California</em>
<hr>
<span class="details">Details [+]</span>
<span class="details-display" style="display: none;">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</span></div>

CSS

.slide-caption {
    background: #FFF;
    bottom: 30px;
    color: #333;
    cursor: pointer;
    opacity: 0.7;
    padding: 1em 1.5em;
    position: absolute;
    right: 30px;
    text-align: left;
    width: 30%;
    z-index: 0;
    transition: opacity 0.8s,z-index 0 0.8s;
    -moz-transition: opacity 0.8s,z-index 0 0.8s;
    -webkit-transition: opacity 0.8s,z-index 0 0.8s;
}

.slide-caption strong {
    font-family: 'montserrat',sans-serif;
    text-transform: uppercase;
}

hr {
    background-color: #DDD;
    border: 0;
    height: 1px;
}

.slide-caption em, .slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption .details-display {
    display: none;
}

JS

var toggled = true;
$('span.details').click(function () {
    if (toggled) {
        $(this).html('Details [-]');
    } else {
        $(this).html('Details [+]');
    }
    toggled = !toggled;
    $(this).parent().find("span.details-display").slideToggle("slow");
});

http://jsfiddle.net/jsLdjq2f/

Upvotes: 3

Views: 55

Answers (1)

Chris Pietschmann
Chris Pietschmann

Reputation: 29895

Just change the 'details-display' to be a DIV rather than SPAN

    var toggled = true;
    
    $('span.details').click(function () {
        if (toggled) {
            $(this).html('Details [-]');
        } else {
            $(this).html('Details [+]');
        }
        toggled = !toggled;
        $(this).parent().find("div.details-display").slideToggle("slow");
    });
.slide-caption {
    background: #FFF;
    bottom: 30px;
    color: #333;
    cursor: pointer;
    opacity: 0.7;
    padding: 1em 1.5em;
    position: absolute;
    right: 30px;
    text-align: left;
    width: 30%;
    z-index: 0;
    transition: opacity 0.8s,z-index 0 0.8s;
    -moz-transition: opacity 0.8s,z-index 0 0.8s;
    -webkit-transition: opacity 0.8s,z-index 0 0.8s;
}

.slide-caption strong {
    font-family: 'montserrat',sans-serif;
    text-transform: uppercase;
}

hr {
    background-color: #DDD;
    border: 0;
    height: 1px;
}

.slide-caption em, .slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption span {
    display: block;
    font-size: 13px;
}

.slide-caption .details-display {
    display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="slide-caption"><strong>The Catwalk</strong><hr><em>Holmby Hills, California</em>
<hr>
<span class="details">Details [+]</span>
<div class="details-display">The connecting walkway floats above the second story of the Main hall, joining the North and the South wings.</div></div>

Upvotes: 4

Related Questions