10

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>

5
  • 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. 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
2

Me too faced the same problem and finally have a workaround.

What breaks if you remove the mentioned event ?

As you high lighted by removing/unbind the click event "div#accordion.panel-group.scEnabledChrome"

Collapsing is working as expected but what is the impact?

So far my observation, the event responsibility is to show the Rendering detail popup as showed below,

enter image description here

If I removed/unbind the event, this popup is not displaying against this selectors and their Childs "div#accordion.panel-group.scEnabledChrome".

Workaround : Custom JS event

Add custom JS to handle collapse, This is working for me without any trouble.

Please add this if its experience editor.

<script>
    $(document).ready(function (e) {
        $(".panel a").click(function () {
           
            var targetId = $(this).attr("href");
    
            $(".panel-collapse").each(function (key, value) {
              
                // Handle current click
                if ("#" + $(this).attr("id") == targetId) {
                    $(this).collapse("toggle");
                } else {
                    if ($(this).hasClass("in")) {
                        $(this).removeClass("in");
                    }
                }
            });
        });
    });    
</script>

Your Answer

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

Not the answer you're looking for? Browse other questions tagged or ask your own question.