CODEWITHSUNDEEP
javascriptjquery
user504023
user504023

Reputation: 593

issue with accordian Jquery script

I wrote accordion script to deploy in mobile website, every thing is working fine. However I am facing one issue when the page length is increasing.

there are about 8 to 10 bars in accordion. when i am scrolling down and clicking any of the item bar to display content, page is moving to top instead of staying at current position where i have clicked.

Please advice me the solution.

below is the script

$('.acc_container').hide(); $('.acc_container1').hide();

$('.acc_trigger').click(function(){ $(this).siblings('.acc_container1').slideUp('fast'); $(this).parent().siblings('div').children('.acc_container1').slideUp('fast'); $(this).parent().siblings('div').children('.acc_container').slideUp('fast'); $(this).next().siblings('.acc_container').slideDown('fast'); });

Upvotes: 1

Views: 268

Answers (2)

Alex
Alex

Reputation: 65952

On each of your accordion's triggers which display content, which I assume are anchor tags, you need to prevent the default behavior of the event. Which in the case of anchor tags, is to take you too the href attribute of the tag. If the href attribute is set to #, clicking on the anchor tag will take you to the top of the page. So, something like this should work, calling preventDefault() on jQuery's event object, assuming .acc_trigger is the selector for all of your accordian triggers:

$(".acc_trigger").click(function(e) {
    $(this).siblings('.acc_container1').slideUp('fast');
    $(this).parent().siblings('div').children('.acc_container1').slideUp('fast');
    $(this).parent().siblings('div').children('.acc_container').slideUp('fast');
    $(this).next().siblings('.acc_container').slideDown('fast');
    e.preventDefault();
});

Upvotes: 1

kobe
kobe

Reputation: 15835

I am assuming your click might a href click if so 

$("a").click(function(event) {
// do all your logic here and add the below link  

event.preventDefault();

});

If that is not href

Give your .acc_container class a set height of you need like 500px or so, and an 

height:600px;
overflow: hidden;

That should take carek

Upvotes: 1

Related Questions