I am facing an issue with a page that users access by clicking through an ebook. Upon clicking a link, they are directed to a specific product on the page, and the URLs look like
example.com/#product1
example.com/#product6
example.com/#product15,
etc...
The page automatically scrolls to that section using this code snippet:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('html,body').animate({
scrollTop: jQuery(window.location.hash).offset().top-150
}, 900, 'swing');
});
There is another div within the #product1 div named #amazonbutton, which has a style of display:none.
<div id="product1" class="product">
<a href="link">
<div id="amazonbutton"><img src="amazonbuttonz" />
</div>
</a>
</div>
This button serves as a "go to Amazon" option but remains hidden for all items except the currently active div. Essentially, it should display only for the active div while staying hidden for all inactive ones.
How can I achieve this with jQuery?
I have some incomplete code that I'm struggling with:
jQuery(function() {
jQuery('amazonbutton').each(function() {
if (jQuery(this).attr('href') === window.location.href) {
jQuery(this).addClass('active');
}
});
});
Any help would be greatly appreciated!