<!DOCTYPE html>
<
html
>
<
head
>
<
title
>Accordion with Anchor</
title
>
<
link
href
=
rel
=
"stylesheet"
integrity
=
"sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM"
crossorigin
=
"anonymous"
>
</
head
>
<
body
>
<
div
class
=
"container py-5"
>
<
h1
style
=
"color: green;"
>GeeksForGeeks</
h1
>
<
div
class
=
"accordion py-5"
id
=
"accordion"
style
=
"width: 30%;"
>
<
div
class
=
"accordion-item"
>
<
h2
class
=
"accordion-header"
id
=
"section1"
>
<
button
class
=
"accordion-button collapsed"
type
=
"button"
data-bs-toggle
=
"collapse"
data-bs-target
=
"#collapse1"
aria-expanded
=
"false"
aria-controls
=
"collapse1"
>
Section 1
</
button
>
</
h2
>
<
div
id
=
"collapse1"
class
=
"accordion-collapse collapse"
aria-labelledby
=
"section1"
data-bs-parent
=
"#accordion"
>
<
div
class
=
"accordion-body"
>
Content for section 1.
</
div
>
</
div
>
</
div
>
<
div
class
=
"accordion-item"
>
<
h2
class
=
"accordion-header"
id
=
"section2"
>
<
button
class
=
"accordion-button collapsed"
type
=
"button"
data-bs-toggle
=
"collapse"
data-bs-target
=
"#collapse2"
aria-expanded
=
"false"
aria-controls
=
"collapse2"
>
Section 2
</
button
>
</
h2
>
<
div
id
=
"collapse2"
class
=
"accordion-collapse collapse"
aria-labelledby
=
"section2"
data-bs-parent
=
"#accordion"
>
<
div
class
=
"accordion-body"
>
Content for section 2.
</
div
>
</
div
>
</
div
>
</
div
>
<
div
class
=
"dropdown mt-3"
>
<
button
class
=
"btn btn-primary dropdown-toggle"
type
=
"button"
id
=
"dropdownMenuButton"
data-bs-toggle
=
"dropdown"
aria-expanded
=
"false"
>
Go to Section
</
button
>
<
ul
class
=
"dropdown-menu"
aria-labelledby
=
"dropdownMenuButton"
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#section1"
data-bs-toggle
=
"collapse"
data-bs-target
=
"#collapse1"
>
Open Accordion Panel 1
</
a
>
</
li
>
<
li
><
a
class
=
"dropdown-item"
href
=
"#section2"
data-bs-toggle
=
"collapse"
data-bs-target
=
"#collapse2"
>Open
Accordion Panel 2
</
a
>
</
li
>
</
ul
>
</
div
>
</
div
>
<
script
>
// Scroll to anchor and open accordion panel
document.querySelectorAll(
'a[data-bs-toggle="collapse"]').forEach(function (link) {
link.addEventListener('click', function (event) {
event.preventDefault();
let target =
document.querySelector(this.getAttribute('href'));
let accordion =
document.querySelector(this.getAttribute('data-bs-target'));
$('html, body').animate({
scrollTop: $(target).offset().top
}, 500);
$(accordion).collapse('show');
});
});
</
script
>
<
script
src
=
integrity
=
"sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin
=
"anonymous"
>
</
script
>
</
body
>
</
html
>