SO 16578224 - toggle effct

by Gerald Gillespie

HTML

<div id="landing">
    <div class="copy-background">
         <h4>Header</h4>

        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed leo enim, euismod nec ultrices id, ultrices vitae nisl. Aenean pharetra congue tempor. Pellentesque nisi nisl, aliquam ut pulvinar sed, tristique pretium tortor. In commodo lobortis euismod. Aliquam nisl risus, rutrum sed facilisis id, ultrices a nisi. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
    </div>
    <div class="landingHideButton">
        <p class="hide">Hide Content</p>
        <p class="show">Show Content</p>
    </div>
</div>

CSS

.landingHideButton p {
    text-align: center;
    font-family: Helvetica, Arial, sans-serif;
    font-size: 10pt;
    font-weight: 500;
    color: #7d7d7d;
}
.show {
    display:none
}

JavaScript

$(".landingHideButton").click(function () {
    var dur = 2000;
    $(".copy-background").toggle(dur);
    $(this).find('.hide,.show').slideToggle( dur);
 
}); // end click