Scroll into view to clicked accordion item

Question

I'm making a Russian language dictionary in which entries for keywords are inserted into accordion elements. The information inside the accordion is taken from a PHPmyadmin database. So far so good: I managed to set the database and the accordion mechanism, and as such, the new content is correctly adjusted to the index.php page whenever I add new information to the database.

However, if I click the accordion item at the bottom of the screen, I need to scroll down manually as far as the content box with the definitions of the keyword. As follows:

Here's my abbreviated code:

CSS:

.accordionWrapper { (...) }
.accordionItem { (...) }
.accordionItemHeading {
cursor: pointer; (...) 
}
.close .accordionItemContent {
                height:0px;
                -webkit-transform: scaleY(0);
                float:left;
                display:block;
            }
.open .accordionItemContent {
                (...)
                display:block;
                -webkit-transform: scaleY(1);
                -webkit-transform-origin: top;
                box-sizing: border-box;
            }
 .open .accordionItemHeading {
                margin:0px;
                -webkit-border-top-left-radius: 3px;
                -webkit-border-top-right-radius: 3px;
                -webkit-border-bottom-right-radius: 0px;
                -webkit-border-bottom-left-radius: 0px;
                (...)
            }
(...)

HTML/PHP

<div class="accordionWrapper">
<div class='accordionItem close'>

<h2 class='accordionItemHeading'> <!--PHP здесь--> </h2>

<div class='accordionItemContent'>
<!--PHP здесь -->
</div>

</div>
</div>

Javascript:

<script>   
var accItem = document.getElementsByClassName('accordionItem');
var accHD = document.getElementsByClassName('accordionItemHeading');
var accCon = document.getElementsByClassName('accordionItemContent');

for (i = 0; i < accHD.length; i++) {
accHD[i].addEventListener('click', toggleItem, false);
      }
function toggleItem() {
     var itemClass = this.parentNode.className;
     for (i = 0; i < accItem.length; i++) {
               accItem[i].className = 'accordionItem close';
                    }
      if (itemClass == 'accordionItem close') {
               this.parentNode.className = 'accordionItem open';
               accItem[i].scrollIntoView();

                    }
                }
</script>

Inside the if statement I tried to type accItem[i].scrollIntoView();, but no use. Whatever I could find on the web related the scrollIntoview command was about scrolling to a given id by clicking on a navigation button somewhere else. I just want the screen to automatically scroll down to the accordion item which has just been clicked. I don't need any animation or smooth transition.

Thank you for your help in advance.

If you would scroll the clicked item all the way to the top of the page, a basic anchor `` would already do the trick, providing you don't use # in urls for routing. But have you tried `.scrollIntoView(false)` or a full scrollIntoView parameter object to control how far and to which element it should scroll? — Shilly, Apr 17 '19 at 14:01
Actually I don't need it at the top of the page. I'm just looking for an automatic transition from the first screenshot to the third screenshot. — swrutra, Apr 17 '19 at 14:06
That's the question. If you haven't tried `.scrollIntoView(false)` or `.scrollIntoView({ someOption: someValue })`, try that first. Else you're looking at a custom implementation that is more difficult that scrolling the item to the top. And hence scrolling to the top would be way easier to create. — Shilly, Apr 17 '19 at 14:08
I see only one `if` in your code, it's after the `for`. `i` will be equal to `accItem.length` there which is an index after the last element of `accItem`. Did you look in the debugger? Did you see something like _undefined has no function scrollIntoView_ error? — Dmitry, Apr 17 '19 at 14:17
If scrolling the item to the top is easier, then let's forget about customization for a while. Where should I type the tag? I guess it should enclose the
item heading tag, but if so, it doesn't work either. I guess that is used to link to an element with a specific ID. But my accordion items are described by classes and not ID's. — swrutra, Apr 17 '19 at 14:35
Dmitri, I've inspected the code in-browser, and even though I was expecting the error "accItem.scrollIntoView() is not a function", the inspector did not return such an error. I've edited the quoted code in order to include that line. — swrutra, Apr 17 '19 at 15:19
Try doing `accItem[accItem.length - 1].scrollIntoView();` instead of `accItem[i].scrollIntoView();`. As I wrote before the element at `accItem[i]` does not exist there. — Dmitry, Apr 18 '19 at 05:54

Scroll into view to clicked accordion item

item heading tag, but if so, it doesn't work either. I guess that is used to link to an element with a specific ID. But my accordion items are described by classes and not ID's.

0 Answers0