0

I've written a simple accordion using zepto js lib.

How can I prevent the page from jumping when I click on the empty anchor tags?

Also Looking for advice on how to improve this better.

HTML

<div class="box">
   <span class="learn-more"><a href="#">Learn more</a></span>
   <div class="more">
     blah<br>
     blah<br>
     blah<br>
     <span class="close"><a href="#">close</a></span>
   </div>
</div>
<div class="box">
   <span class="learn-more"><a href="#">Learn more</a></span>
   <div class="more">
     blah<br>
     blah<br>
     blah<br>
     <span class="close"><a href="#">close</a></span>
   </div>
</div>

​ Javascript

// hide content on page load
$('.more').addClass('hide');
// set variables
var learnMore = $('.learn-more'),
    close = $('.close');
// click on 'learn-more' shows content
learnMore.click(function() {
    $(this).hide().next('div').toggleClass('hide');
});
// hide content when user clicks on 'close' within content
close.click(function() {
    $(this).parent().toggleClass('hide');
    $(this).parent().prev().show();
});

​ Working demo

http://jsfiddle.net/s5x9A/

calebo
  • 3,312
  • 10
  • 44
  • 66

1 Answers1

1

In jQuery & Zepto, you can prevent the '#' page jump by using event.preventDefault like so:

$('a.your-link').click( function (event) {
    event.preventDefault();
});

One difference is that in Zepto you cannot end your event handlers with a return: false; like you can in jQuery.

more on that: Zepto.js doesn't return false?

Community
  • 1
  • 1
nmartin413
  • 60
  • 10