Copy link to clipboard
Copied
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
1 Correct answer
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">
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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".
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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.
Copy link to clipboard
Copied
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
Copy link to clipboard
Copied
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>
Copy link to clipboard
Copied
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