1 | initial version |
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.