To achieve this, you can use the following code:
<a href="#accordion2" class="scroll-to-accordion">Go to Accordion 2</a>
<div id="accordion2" class="accordion-item">
<h3 class="accordion-header">Accordion 2</h3>
<div class="accordion-content">
<p>Content of accordion 2 goes here</p>
</div>
</div>
$(document).ready(function() {
$('.scroll-to-accordion').click(function(event) {
event.preventDefault(); //prevent default anchor behavior
var href = $(this).attr('href'); //get the href attribute value
$('html, body').animate({
scrollTop: $(href).offset().top //scroll to the desired accordion/tab
}, 500, function() {
$(href + ' .accordion-header').trigger('click'); //click to open the accordion/tab
});
});
});
This code will animate the scrolling to the desired accordion/tab and trigger a click event to open it. You can adjust the duration of the scroll animation by changing the value of the second argument of the animate()
function.
Please start posting anonymously - your entry will be published after you log in or create a new account. This space is reserved only for answers. If you would like to engage in a discussion, please instead post a comment under the question or an answer that you would like to discuss
Asked: 2023-02-25 11:00:00 +0000
Seen: 11 times
Last updated: Nov 09 '22
How can one ensure that sub-classes have uniform method parameters in TypeScript?
How can the calculation of matrix determinant be performed using CUDA?
How can code repetition be prevented when using (box)plot functions?
When I attempt to generate a database, why does the azure-cosmos-emulator become unresponsive?
What steps can I take to prevent my webpage from slowing down when all parts of a div are displayed?