Jquery slideUp bottom page

Question

I have a problem with accordion. I have a where the user can clic on it (at the bottom of my page), and roll the content. My problem is : Everything works correctly, but I have to scroll manually to see the rolled content. I dont know what to do. I already try toggle instead of slideUp, create a "push" div .. but it's not okay.

See my code below.

$(document).ready(function() {
  $('.accordeon').hide(); // hide the content of .accordeon
  $('h4').click(function() { // when clic on h4
    $(this).next('div:hidden').slideDown() // roll the div
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a mauris et nulla facilisis eleifend. Sed metus orci, vulputate sit amet malesuada id, luctus vestibulum lacus. Sed faucibus, nibh vel faucibus porta, lectus lacus suscipit metus, ut posuere nulla dolor porttitor erat. Nam iaculis dolor et est tristique scelerisque. Integer gravida scelerisque est, ut pellentesque sem facilisis in. Quisque felis elit, laoreet id sagittis non, sollicitudin vitae turpis. Pellentesque quis quam sed nibh sollicitudin porttitor non ac sapien. Cras luctus egestas urna, vitae bibendum enim malesuada ut. Nulla porta tempus mi vel consequat. Aenean scelerisque porttitor felis, id elementum erat porttitor eu. Mauris vitae elit non lorem malesuada viverra non ac eros.</p>
 
     
<h4>CLIC HERE</h4>
<div class="accordeon">
 <img src="http://2.bp.blogspot.com/-ot4eLEDWAjs/Uk9fzDJlQCI/AAAAAAAAKsU/UfUhYvEvAz4/s1600/Recherche-image-b%C3%A9b%C3%A9-80.jpg" alt="Metz" width="300" height="225" />
</div>

Go to the bottom of the page, clic on the link, and you can see that you have the scroll to see the hide content. How to do this automatically ?

I think the best solution is "when I clic on my div, change the position of the page" but I dont know how.

Is anybody already has this problem ?

Thanks a lot everyone !

score 0 · Answer 1 · edited May 23 '17 at 12:05

0

If you associate an id to the div, you can scroll to it using JQuery.

Click here to learn more from an answer by Peter Ajtai.

edited May 23 '17 at 12:05

Community

1
1

answered Oct 28 '14 at 19:17

Josiah

138
1
7

Sorry but I cannot, jquery is chinese for me. – ooo Oct 28 '14 at 19:23

CodeGodie · Accepted Answer · 2014-10-28T19:34:02.177

0

Make the page scroll to the top of your element after the slide function. Try this:

   $(document).ready(function() {
        $('.accordeon').hide(); // hide the content of .accordeon
        $('h4').click(function() { // when clic on h4
            $(".accordeon").slideToggle(function() {
                $('html, body').animate({
                    scrollTop: $(this).offset().top
                }, 500);
            });
        });
    });

edited Oct 28 '14 at 19:34

answered Oct 28 '14 at 19:28

CodeGodie

12,116
6
37
66

Thank you so much CodeGodie ! I spend HOURS on it, thank you ! – ooo Oct 28 '14 at 19:34
@ooo No problem buddy, anytime. :) – CodeGodie Oct 28 '14 at 19:35

Jquery slideUp bottom page

2 Answers2