Question

I want to duplicate the on click ‘Contact’ menu element drop down effect on ‘Bio’ menu element

http://www.dawaf.co.uk/jj/

I have duplicated the html code in header.php:

<!-- contact -->
<section id="contact">
    <!-- container -->
    <div class="container">
                <p>Creative Consultant / Stylist<br /><br /><a href="mailto:[e-mail]">[e-mail]</a><br />
                [phone]</p>
        
    </div>
    <!-- .container -->
    
</section>
<!-- .contact -->

<!-- bio -->
<section id="bio">
    <!-- container -->
    <div class="container">
                <p>Testing this shows up</p>
        
    </div>
    <!-- .container -->
    
</section>
<!-- .bio -->

and I have duplicated the CSS.

I am not sure what Javascript I need to edit to get the same effect on script.js:

    /* Show the portfolio
     ------------------------------------------------- */
    
    $('#portfolio-catcher').click(function() {
        
        $('h1 a').trigger('click');
        
        return false;
        
    });
    
    $('a[href="#portfolio"]').click( function () {

        // hide contact 
        $('#contact').stop().slideUp({
            duration: 250, 
            easing: 'easeInOutCubic'
        });
        
        // remove the iframe content (for vimeo videos)
        
        $('iframe').remove();
        
        hattie.showPortfolio();

        return false;


    });
    
    /* Contact section click
         ------------------------------------------------- */
        $('a[href="#contact"]').click(function() {

            // hide slideshow whatever
            $('#slideshow').stop().slideUp({
                duration: 300, 
                easing: 'easeInOutCubic'
            });     

            // show contact
            $('#contact').stop().slideDown({
                duration: 300, 
                easing: 'easeInOutCubic'
            });

            hattie.showPortfolio();

            return false;

    });
    
    /* Launching a project
     ------------------------------------------------- */

    $('hgroup').click(function() {

        // scroll to top
        $.scrollTo(0, 250);

        $hgroup     = $(this);
        // hide contact 

        if ($('#contact').is(':visible')) {

            $('#contact').stop().slideUp({
                duration: 250, 
                easing: 'easeInOutCubic'
            });
        }

        // show the loading gif in the container
        $('#slideshow-container').html('<div class="loading"><img src="/assets/img/loading.gif" alt="loading"/></div>');

        $('section#work').stop().animate({
            'margin-top' : '+=' +($(window).height() - 55) + 'px'
        }, 700, 'easeInOutCubic', function () {

            // load the project into the slideshow container div
            $('#slideshow-container').load('' + $hgroup.attr('data-project'), function() {
                // bind slideshow
                    slideshow.render();
                    $('section#work').css('margin-top', '0px');
            });

        });

        return false;

    });
    
}, 

this.folioLinkShow  = function() {
    
    if ($('.slide').length > 1) {
        
        
        $('#portfolio-catcher').hover(function() {

            $('nav#show-projects div').slideDown(200);


        }, function () {

            $('nav#show-projects div').slideUp(200);

        });
        
        
    } else {
        
        $('nav#show-projects').unbind();
        
    }
}, 

this.loadImages     = function() {

Answer 1

Make your “Bio” href like so: #bio

Then, add this to your Javascript (It will do the exact same thing as the contact click will do:

/* Contact section click ------------------------------------------------- */
$('a[href="#contact"]').click(function() {
    // hide bio
    if ($('#bio').is(':visible')) {
        $('#bio').stop().slideUp({
            duration: 250, 
            easing: 'easeInOutCubic'
        });
    }
    // hide slideshow whatever

        $('#slideshow').stop().slideUp({
            duration: 300, 
            easing: 'easeInOutCubic'
        });     

        // show contact
        $('#contact').stop().slideDown({
            duration: 300, 
            easing: 'easeInOutCubic'
        });

        hattie.showPortfolio();

        return false;

});

/* Bio section click ------------------------------------------------- */
$('a[href="#bio"]').click(function() {
    // hide contact 
    if ($('#contact').is(':visible')) {
        $('#contact').stop().slideUp({
            duration: 250, 
            easing: 'easeInOutCubic'
        });
    }

    // hide slideshow whatever
    $('#slideshow').stop().slideUp({
        duration: 300, 
        easing: 'easeInOutCubic'
    });     

    // show contact
    $('#bio').stop().slideDown({
        duration: 300, 
        easing: 'easeInOutCubic'
    });

    hattie.showPortfolio();

    return false;

});