Link zum Anker geht auf die Seite, aber nicht auf den Anker

[margot-jo]

Hallo,

ich habe eine Downloadseite mit mehreren Links zu Ankern auf einer anderen Seite. Der Link springt zwar zu dieser Seite, aber nicht zu den einzelnen Ankern. So muss man trotz Anker scrollen, um auf untere Textstellen zu kommen.

Allerdings ist es kein Text, sondern eine 2-spaltige Tabelle mit einigen Zeilen. Aber kann es daran liegen?

Gruß

Margot-Jo

[osgood_ · Accepted solution]

No, it would not be because you are using a two-column table. Don't use anchors, use unique 'ids' like below: They dont need to be called, one, two, three etc- you can name the 'ids' whatever you like, so long as each id is only used once per page.

<h4 id="one">Box 1</h4>

<h4 id="two">Box 2</h4>

<h4 id="three">Box 3</h4>

<h4 id="four">Box 4</h4>

<h4 id="five">Box 5</h4>

<h4 id="six">Box 6</h4>

Then in your link page point to the ids:

<a href="go-to-box.html#one">Box 1</a>
<a href="go-to-box.html#two">Box 2</a>
<a href="go-to-box.html#three">Box 3</a>
<a href="go-to-box.html#four">Box 4</a>
<a href="go-to-box.html#five">Box 5</a>
<a href="go-to-box.html#six">Box 6</a>

[margot-jo]

Thank you very much! I'll try to make it like this. Why did you put "h"4 before "id"? Isn't it the size of the font or title?

Margot-Jo

[osgood_]

The use of the h4 tag was just an example of where you could apply an id.

You could apply the id to a paragraph tag or a span tag, a td tag etc.

[margot-jo]

Thank you very much! It works ... and it works with anchors too. Reading your advice I understood which was the mistake I made. I had only one ID anchor and gave the name to "#name".

[PizzaPasta]

Hallo alle

seit dieser Antwort wurde DW weiterentwickelt und Bootstrap 4 eingefügt.

Vieles ist einfacher geworden - das ist ganz toll!

Leider funktioniert das Springen zum Link nicht mehr wie früher und wie es auch oben beschrieben ist.

Wo kann ich / muss ich den Anker im Accordion setzen, damit von einer anderen Seite aus genau das gewünschte Panel geöffnet wird? Ich habe es nicht geschafft, obwohl ich vieles ausprobiert habe und bin darum dankbar für Hilfe.

Danke PizzaPasta

[osgood_]

Hello, I'm not quite sure what it is you require.

Are you trying to open a specific Bootstrap Accordion panel when a link/s on another webpage is/are clicked linking to the page which displays the Bootstrap Accordion?

If so then you can do that by passing url parameters to the page where the Bootstrap Accordion is displayed.

Example: The Bootstrap 4 Accordion component, by default, allocates a uniquie id to each panel:  collapseOne, collapseTwo , collapseThree etc and a unique id for the accordion header: headingOne, headingTwo, headingThree etc

Set up any external link/s, those which point to the page where the Bootstrap Accordion is being displayed, as below: (obviously replace 'bootstrapAccording.html' with the name of your page)

<a href="bootstrapAccordion.html?panel=collapseOne&header=headingOne">Panel 1</a>
<a href="bootstrapAccordion.html?panel=collapseTwo&header=headingTwo">Panel 2</a>
<a href="bootstrapAccordion.html?panel=collapseThree&header=headingThree">Panel 3</a>

Then on the page where the Bootstrap Accordion is being displayed add some javascript, directly before the closing </body> tag:

<script>
var urlParams = new URLSearchParams(window.location.search);
document.getElementById(urlParams.get('panel')).classList.add('show');
document.getElementById(urlParams.get('header')).scrollIntoView();
</script>

When a link is clicked from an external page to the Bootstrap Accordion page the page should scroll to where the Bootstrap Accordion has been inserted and the correct accordion panel should be open.

[PizzaPasta]

Hello

Thanks for the quick reply.
Yes, it is exactly what I am looking for.

And it's a nice bit better than before, but unfortunately not quite perfect yet.
Example:

I want to open the second panel of the acccordion, so I put the external link <a href="mypage.html?panel=collapseTwo&header=headingTwo">Panel 2</a>.

It actually opens the second panel, but the first panel is open likewiese.

Similarly, the third panel is open, but the accordion still shows the first one.

It seems, that opening the first panel is a very important command.

Can you help me again? That would be great! Thanks

PizzaPasta

[osgood_]

Yes, just alter the script slightly, add the code marked in red below:

<script>

var urlParams = new URLSearchParams(window.location.search);

if(urlParams.get('status') === "true") {
const collapse = document.querySelectorAll('.collapse');
collapse.forEach(function(collapse) {
collapse.classList.remove('show');
})
}

document.getElementById(urlParams.get('panel')).classList.add('show');
document.getElementById(urlParams.get('header')).scrollIntoView();

</script>

Then add the 'status' to the links as below

<a href="bootstrapAccordion.html?panel=collapseOne&header=headingOne&status=true">Panel 1</a>
<a href="bootstrapAccordion.html?panel=collapseTwo&header=headingTwo&status=true">Panel 2</a>
<a href="bootstrapAccordion.html?panel=collapseThree&header=headingThree&status=true">Panel 3</a>

[PizzaPasta]

Hello Osgood_

Simply great!

Now it works as I want and as it worked on previous sites (bootstrap 3).
Thank you very much for your kind help.

PizzaPasta