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");
});
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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.