Accordion Focus when opening content off screen

Question

I made an example of my problem in this jfiddle: https://jsfiddle.net/kLh8r294/2/

Here is the javascript:

$(document).ready(function() {
    function close_accordion_section() {
        $('.accordion .accordion-section-title').removeClass('active');
        $('.accordion .accordion-section-content').slideUp(1000).removeClass('open');
    }

    $('.accordion-section-title').click(function(e) {
        // Grab current anchor value
        var currentAttrValue = $(this).closest('.accordion-section-title');

        if(currentAttrValue.hasClass('active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            currentAttrValue.addClass('active');
            // Open up the hidden content panel
            $('.accordion ' + currentAttrValue.attr('href')).slideDown(1000).addClass('open'); 
        }

        e.preventDefault();
    });
});

Rest is on jsfiddle.

When i open an accordion and there is a lot of content, the content scrolls off screen. Now i made an example of "First one" and "Last one".

I want to make the focus stay on the accordion title for instance as it is opening, so when the content goes off screen, the user still has the beginning of the clicked accordion in focus. In case its a little bit off the focus of the accordion it should scroll smoothly to it not just jump in one go.

Is there anything already built in jquery or javascript that can be used? Im learning all of this as i go so any help would be appriciated, or insight.

score 1 · Answer 1 · edited Mar 20 '16 at 21:19

1

The easiest option maybe is a last line in your JS:

document.getElementById("yourTargetSelector").scrollIntoView();

or:

document.getElementById(this).scrollIntoView();

edited Mar 20 '16 at 21:19

Marcos Pérez Gude

20,206
4
34
65

answered Mar 20 '16 at 19:54

Auch Da

11
2

score 0 · Answer 2 · edited May 23 '17 at 12:03

0

For smooth scrolling you can make use of scrollTo function. Please refer the following link:

jQuery scroll to element

edited May 23 '17 at 12:03

Community

1
1

answered Mar 14 '16 at 11:34

Abhishek Dhanraj Shahdeo

1,244
2
12
35

But how would i get the feeling that the scrolling animation is not happening, but instead the content is just getting larger. How would i maintain focus on the clicked accordion.. – Ivan Horvatin Mar 14 '16 at 11:54
You can put your contents in two different divisions packed in one box, while clicking on another accordian element, only the division with content will hide, not the title which is in another division and then apply your scrolling code after that. This will make the title to persist and the content to hide and scroll to other part of the accordian. – Abhishek Dhanraj Shahdeo Mar 14 '16 at 12:04
How about if i just keep the focus on the clicked element? In the example it would be a text, in my project it would be an image. That is where the content begins anyway? – Ivan Horvatin Mar 14 '16 at 13:25
Same is applicable there also, you can hide any part of the content that you need even if it is an image or text or whatever. – Abhishek Dhanraj Shahdeo Mar 14 '16 at 13:43
The code up in the question, especially this part: `$('.accordion ' + currentAttrValue.attr('href'))` Is refereing to the id in my `div` that contains the content, so why doesnt scrollTop scroll back to it when i open other accordian sections? I am using examples from the link you provided. – Ivan Horvatin Mar 14 '16 at 14:16
Ignore my last comment, i managed to get it to work, but now i have another problem. I can only scroll to the top of my content, after the accordion finished collapsing. Due to the change in height, jquery doesn't know where it needs to go, since the height of the page is changing. Is there a way i can do this dynamically? For instance, while the accordian is collapsing calculating the height of the element and slowly scrolling to there? Or is that inefficient, takes too much resource and such.. @Abhishek Dhanraj Shahdeo – Ivan Horvatin Mar 14 '16 at 14:38
Not an issue, it will calculate the height by itself and make it work around and efficiency is out of question as you have already jQuery library, and the functions are predefined in there. You can just provide the id of the division where you need to go it shall take you right up there. – Abhishek Dhanraj Shahdeo Mar 15 '16 at 07:36

Accordion Focus when opening content off screen

2 Answers2