7

I have a bootstrap 3 accordion on my Sitcore 8.2 update 5 page, see full markup in bottom. This accordion works as expected, however the accordion panels do not expand any more when the page is opened in the experience editor. I tried several suggested approaches e.g this but was unable to get it to work. The experience editor added 2 click events to the anchor, see below screenshot in red rectangle. The accordion works as expected when these handlers are removed. There are no JavaScript errors on the page.

Has anyone been able to get the accordion to expand in experience editor? Any idea what will break if below 2 event handlers are removed?

Experience Editor Events

<div id="accordion" class="panel-group">
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">1. What is HTML?</a>
            </h4>
        </div>
        <div id="collapseOne" class="panel-collapse collapse">
            <div class="panel-body">
                <p>HTML stands for HyperText Markup Language. HTML is the main markup language for describing the structure of Web pages. <a href="https://www.tutorialrepublic.com/html-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">2. What is Bootstrap?</a>
            </h4>
        </div>
        <div id="collapseTwo" class="panel-collapse collapse in">
            <div class="panel-body">
                <p>Bootstrap is a powerful front-end framework for faster and easier web development. It is a collection of CSS and HTML conventions. <a href="https://www.tutorialrepublic.com/twitter-bootstrap-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
    <div class="panel panel-default">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">3. What is CSS?</a>
            </h4>
        </div>
        <div id="collapseThree" class="panel-collapse collapse">
            <div class="panel-body">
                <p>CSS stands for Cascading Style Sheet. CSS allows you to specify various style properties for a given HTML element such as colors, backgrounds, fonts etc. <a href="https://www.tutorialrepublic.com/css-tutorial/" target="_blank">Learn more.</a></p>
            </div>
        </div>
    </div>
</div>

  • Hi @Jeroen, where you able to resolve this? – Romeo Nov 27 '18 at 5:37
  • I have not spend much more time looking into it after asking this question but have not been able to resolve. We are currently on Sitecore 9 but still same issue. – Jeroen Nov 28 '18 at 1:40
  • I have collapsed all the accordion in experience editor for now. So the user can modify the content. – Romeo Nov 28 '18 at 5:09
  • have the option to inject a extra class when its experience editor, we normally add extra logic in view layer where if its experience editor do some different extra logics. – vikash raaj Sep 2 '19 at 18:28
  • @Jeroen - Am I missing something here , In the accordion tab item 2 , looks like it is already in "Open" state ? – Abhay Dhar Oct 1 '19 at 8:37

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.