'Function to scroll and open an accordian

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.

javascriptphphtmlcssmagento2


Solution 1:[1]

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'

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Singh3y

Related Questions