niyasc niyasc - 4 months ago 8
jQuery Question

Placing an element on top of screen

I'm trying to create an accordion using

jQuery
and my code is shared below.



$(document).ready(function() {

$('#initial .section-content').slideDown();

$('h2').click(function() {
$('.section-content').slideUp();
$(this).siblings('.section-content').slideDown();
});
})

.section-content {
display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="initial">
<h2>Section 1</h2>
<p class="section-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
</p>
</div>
<div>
<h2>Section 2</h2>
<p class="section-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
</p>
</div>
<div>
<h2>Section 3</h2>
<p class="section-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
</p>
</div>
<div>
<h2>Section 4</h2>
<p class="section-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ac purus at urna ultrices placerat in a ipsum. Nullam tincidunt tortor quis nibh feugiat, id finibus nisl rutrum. Donec cursus ligula quam, sit amet mollis elit hendrerit quis. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Ut sed massa tellus.
</p>
</div>





In this accordion, when I click on each title, it will close other sections open content corresponding to this section.

I want to add more functionality to this accordion. When I click on a heading, corresponding content will be expanded. After that, I want to scroll window such that, the heading on which I clicked appears on top of screen. How can I implement this feature?

Answer

If you want to achieve the scrolling after the opening/closing of the accordion, then you must use the callback function of either your call to slideDown or slideUp.
Documentation for slideDown is here: http://api.jquery.com/slidedown/
And for slideUp here: http://api.jquery.com/slideup/

The code could look like this:

$('h2').click(function() {
    $('.section-content').slideUp();
    $(this).siblings('.section-content').slideDown('slow', function() {
        $('html, body').animate({
            scrollTop: $(this).siblings('h2').offset().top
        }, 500);
    });
});

Fiddle where the example above is working can be found here: https://jsfiddle.net/s48gx6Lf/

Comments