0

I have minified JS and HTML and CSS in Magento 2.

After that Accordion is not working.

<?php
$collectionTitle = $this->getCollectionFaqcat();
?>
<div class="shy-shadow-container row mrg0" data-mage-init='{"accordion":{"openedState": "active","navigation":"true", "collapsible": false, "active":[0], "multipleCollapsible": false}}'> 
    <div class="col-md-3 manage-faqs-left pd0">
        <?php $j = 1; ?>
        <?php foreach ($collectionTitle as $item): ?>  
            <div id ="<?= $j ?>" data-role="collapsible" class="faqs-role">
                <div data-role="trigger" class="trigger"> 
                    <span>
                        <?php echo $block->filterOutputHtml($item->getCategoryName()); ?>
                    </span>
                </div>
            </div>    
            <?php $j++; ?>
        <?php endforeach; ?>
        <div class="cms-right-sidebar">
            <?php echo $block->getLayout()->createBlock('Magento\Cms\Block\Block')->setBlockId('support-right-sidebar')->toHtml(); ?>
        </div>
    </div>
    <div class="col-md-9 manage-faqs-right cms-center">
        <?php $j = 1; ?>
        <?php foreach ($collectionTitle as $item): ?> 
            <?php $collection = $this->getCollectionFaq($item->getId()); ?> 
            <div data-role="content" class="faqs-content">
                <?php $i = 1; ?>
                <?php foreach ($collection as $items): ?>
                    <div class="faqs-question-answer-wrap">             
                        <div class="faqs-question" data-role="#faq-row-<?php echo $j . $i; ?>">
                            <?php echo $block->filterOutputHtml($items->getQuestion()); ?>
                        </div>
                        <div class="faqs-answer" id="faq-row-<?php echo $j . $i; ?>" style="display:none">
                            <?php echo $block->filterOutputHtml($items->getAnswer()); ?>
                        </div>
                    </div>
                    <?php $i++; ?>
                <?php endforeach; ?> 
            </div>
            <?php $j++; ?>
        <?php endforeach; ?>
    </div>
</div>   
<!--Script to collapse other FAQ answers when one is expanded -->
<script>
    require([
        'jquery',
    ],
            function ($) {
                $(".faqs-question").click(function () {
                    $(this).next().attr('style', 'display: block');
                    $(".faqs-answer").attr('style', 'display: none');
                });

            });
</script>

Trying to open the question and answer, but it needs double-click to open that.

How to fix the problem in Magento 2?

  • 1
    I recommend not minify JS files, you can have a lot of issues because of that. – Rafael Corrêa Gomes Aug 31 '18 at 12:37
  • Can u explain it – Mano M Aug 31 '18 at 12:40
  • Minify the files yourself, Magento's implementation of bundling and/or minifying is known to cause issues for little gain. – Ben Crook Aug 31 '18 at 13:07

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.