Creating menu: replacing href with jQuery click & toggle function

Question

I've created a basic jsFiddle to give an example of what i'm working on. (I'm using Wordpress & Bootstrap.)

My problem:

Each menu-item has a href which refers to a page in my Wordpress back-end. When you click on a menu-item, a new page is loaded and the jQuery function is ignored. So I used preventDefault to ignore the href. Now there's no new content loaded out of my back-end when I click on a different menu-item because the preventDefault has disabled the original href.

Is there any way to fix this? So if you click on menu-item, the div #content slides to the right containing the actual content a that page.

JS

$("#menu-hoofdnavigatie li a").click(function (event) {
    event.preventDefault();

    var effect = 'slide',                   // Set the effect type
        options = { direction: 'left' },    // Set the options for the effect type chosen
        duration = 700;                     // Set the duration

    $('#content').toggle(effect, options, duration);
});

HTML

<section id="content" class="col-lg-5 height-inherit no-padding">
    <div class="content-inner">
        <a class="closure pull-right">X</a>
        <h1><span>_ </span><?php the_title(); ?></h1>
        <article>
            <?php the_content(); ?>
        </article>
        <div class="border"></div>
        <a class="see-more" href="">Bekijk mijn realisaties <i class="icon-long-arrow-right"></i></a>
    </div>
</section>

Answer 1

I can think of a couple ways of doing this.

1) you preload all the wordpress content into separate divs, give the divs IDs relating to the links on the menu. When you click the link it slides out the corresponding DIV to the ID.
2) you use ajax calls to load the content and replace the content of the single sliding div.

Also, I'd change your slide in function to have a callback that slides out the newly selected item after the slide in is completed.

$("#navigation li a").click(function (event) {
    event.preventDefault();

    var effect = 'slide',                   // Set the effect type
        options = { direction: 'left' },    // Set the options for the effect type chosen
        duration = 700,                     // Set the duration
        id = this.id.replace('item','');

    if ($('.out').length>0){
        $('.out').toggle(effect,options,duration, function(){
            $(this).removeClass('out');
            $('#content'+id).toggle(effect, options, duration, function(){
                $(this).addClass('out');
            });
        });
    } else {
        $('#content'+id).toggle(effect, options, duration, function(){    
                $(this).addClass('out');
        });
    }
});

here's a modification of your fiddle to show what I'm saying for option 1:

http://jsfiddle.net/vy4hR/

to ajax it, you can use the .load() function like LeGEC said before me. Here's my code adapted for it. This assumes that the links actually point to the article content you want to load.

$("#navigation li a").click(function (event) {
    event.preventDefault();

    var effect = 'slide',                   // Set the effect type
        options = { direction: 'left' },    // Set the options for the effect type chosen
        duration = 700,                     // Set the duration
        href = $(this).attr('href');

    if ($('.out').length>0){
        $('.out').toggle(effect,options,duration, function(){
            $(this).removeClass('out');
            $('#content').load(href, function(){
                $('#content').toggle(effect, options, duration, function(){
                   $(this).addClass('out');
                });
             });
        });
    } else {
        $('#content').load(href, function(){
                $(this).toggle(effect, options, duration, function(){    
                    $(this).addClass('out');
                });
        });
    }
});

In this solution you'd only have one content DIV, like you originally had, so the stuff with the id is moot.

Answer 2

You can use jQuery's .load() function, to load the content through an ajax call and put it inside your #content node :

$("#menu-hoofdnavigatie li a").click(function (event) {
    event.preventDefault();

    var url = this.href;
    $('#content').load( url, function(){
      var effect = 'slide',                   // Set the effect type
          options = { direction: 'left' },    // Set the options for the effect type chosen
          duration = 700;                     // Set the duration

      $('#content').toggle(effect, options, duration);
    });
});