CODEWITHSUNDEEP
jqueryhtmlwindowslidetoggle
S.G.
S.G.

Reputation: 13

jQuery slide down div over rest of page

So I've got a div and I'm trying to have it slide down to show contact info, I want an effect sort of like on TheGeekDesigner's website. If you click on the link and scroll to the bottom and click on "How To Reach Me" his contact info slides down over the page.

TheGeekDesigner

I have been unable to get my code to work. Here is my current code:

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);  
});

Upvotes: 1

Views: 311

Answers (1)

brroshan
brroshan

Reputation: 1650

Simply remove $(this).find... from your function and it should work.

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

fiddle

It didn't work because you were searching for a div with a class of contact-info inside the footer, and it's not there.

Upvotes: 2

Related Questions