I am struggling to get my Javascript code to work.
I want it so that when someone clicks on the product review summary of my website that it will scroll to the reviews section and open the relevant tab.
I have managed to get the scroll part working but have been unable to get the accordian to open.
Here is a link to the site: https://mgdev.monstershop.co.uk/t-mech-5-in-1-52cc-petrol-garden-cutter-multi-tool
Here is the code i have so far.
<script>
function viewReviews(){
document.getElementById('customer-reviews').scrollIntoView({
behavior: 'smooth'});
document.getElementsByClassName('productAccordian').style.display='block';
}
</script>
<div class="reviews-actions">
<a class="action view" style="cursor: pointer;" onclick="viewReviews()">
This is the code that generates the accordian
<div>
<input id="ac-<?php echo $counter; ?>" name="accordion-1" type="radio" <?php if($counter == 1){echo 'checked';} ?>>
<label for="ac-<?php echo $counter; ?>" class="accordion <?php if($counter == 1){echo 'active';} ?>"><strong><?= /* @noEscape */ $label ?></strong><span class="fa fa-angle-down pull-right" style="color: #6E716E;padding: 10px;"></span></label>
<article class="productAccordian">
<?= /* @noEscape */ $html ?>
</article>
</div>
I notice that when i try to open the accordian by clicking on it normally that seems to work. Just not with my new function.
Any help on this would be appriciated.
getElementsByClassName
returns array of elements. Hence, the assignment is not working. You can try getElementById to make it work or document.getElementsByClassName('productAccordian')[0].style.display='block'