jQuery slide down div поверх остальной страницы

Question

Итак, у меня есть div, и я пытаюсь, чтобы он скользил вниз, чтобы показать контактную информацию, я хочу, чтобы на сайте TheGeekDesigner появился эффект. Если вы нажмете на ссылку и прокрутите страницу вниз и нажмите «Как добраться до меня», его контактная информация скользит по странице.

TheGeekDesigner

Я не смог получить свой код для работы. Вот мой текущий код:

HTML

<footer> 
    <i class="icon icon-plus-circle icon-3x" id="icon"></i>   
</footer> 

<div class="contact-info"> 
    <section id="exit"> 
     <a class="exit"><h2>X</h2></a> 
    </section> 
    <aside id="links"> 
     <h3>LINKS</h3> 
     <p>Follow the links to see site's I've developed!</p> 
     <a href="#">Site Link</a> 
    </aside> 
    <section id="form"> 
     <form> 
     </form> 
    </section> 
    <section id="social-media"></section> 
</div> 

CSS

.contact-info { 
    position:fixed; 
    width:100%; 
    height:100%; 
    background-color: orange; 
    z-index:98; 
    display:none; 
    top:0; 
    left:0; 
} 

JQuery

$(document).ready(function() { 
    //runs when the DOM is ready 
    //function showContactPage shows the contact page 
    function showContactPage() {   
     $(this).find('.contact-info').slideToggle();  
    } 

    $('#icon').on('click', showContactPage); 
    $('#exit').on('click', 'a', showContactPage); 
}); 

Answer 1

Просто удалите $(this).find... из вашей функции, и он должен работать.

function showContactPage() { 
    $('.contact-info').slideToggle(); 
} 

fiddle

Это не сработало, потому что вы искали в DIV с классом contact-info внутри колонтитула, и это не было.