The anchor works only in an open tab on the current page. How to make it send from all tabs?

Question

JavaScript

The page has several buttons (tabs) and a menu with links. These links should point to the contents of the tabs. In this case, I want the "Expandable Panel" link to point to the "CCS & Bootstrap" tab and then to the section that starts with "Expandable Panels". The problem is that the anchor works only when the "CCS & Bootstrap" tab is open, and if others are open, the anchor does not work.
Everything is built on Bootstrap 4.

Code where to send Code where to send
<a id="example-panels" name="example-panels"></a>

<a href="#example-panels">Разворачиваемая панель</a>

This option doesn't work either.

<a href="#example-panels" onclick="$('a[href=#example-panels]').tab('show'); return="false">Разворачиваемая панель</a>.

Answer 1

I found such a more or less option.
The button of the desired tab (tabs) contains id = "pills-css-tab", i.e. it is necessary that when you click on the link, the desired tab opens, and then the anchor works. To open the tab I used

$("#link-example-panel").click(function panel(){
    $('#pills-css-tab').tab('show')
})

Had to add an id to the link that should direct
Everything almost works. Almost, because when you click, only the tab opens, and for the anchor to work, you need to click a second time.
I think this cannot be considered a solution, since you need to click on the link twice, and if there are a lot of these links (and there will be a lot), then you will have to write a script for each, if only to somehow simplify it. But we need to think about it, now it is at least clear where to go.

Answer 2

Try using the scrollIntoView method on the target element.
Another option (after opening a tab):
windows.location = '#example-panels'