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>

What is the exact problem? You want to show the content when you click a link and when you click another link hide previuos content an show the content according to this link? — Andrei Surdu, Oct 09 '13 at 14:06

LeGEC · Answer 1 · 2013-10-09T14:18:32.743

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

Snowburnt · Accepted Answer · 2013-10-09T14:48:01.710

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.

Hi Snowburnt. First of all thanks for the help. This works for me. The only problem is when I click another menu-item, the content remains the same. Is is because the `preventDefault` still disables the original href (which refers to the content of a page)? — , Oct 09 '13 at 14:33
with the solution I've coded you'll have to preload all the data into different sections. I'll add one that includes ajax. — Snowburnt, Oct 09 '13 at 14:42
Yeah, I've tried that method before. When I Use this one, the whole page (instead of `the_content`) is loaded in the div `#content`. Also the page now reloads / refreshes everything when you click a different menu-item. Any thoughts? — , Oct 09 '13 at 15:21
check out the answer in this question: http://stackoverflow.com/questions/15175020/dynamically-changing-navigation-links-next-and-previous-in-wordpress-via-ajax. Basically, you're going to have to make a php ajax action and register it with your theme. — Snowburnt, Oct 09 '13 at 15:25

Creating menu: replacing href with jQuery click & toggle function

2 Answers2