Using with javascript to edit HTML


Hello everyone. I’m developing a site using Bootstrap 4 and Surreal. I have some tabbed content that is using HTML5 data attributes to control the hiding and showing of panels. I want to make a list item and tab-pane cms-repeatable so that the client can add new tabbed content with the CMS. I have the idea that I might be able to accomplish this using with javascript to detect when the CMS is active and to automatically change data attributes when a new element is added to the page. For example, here a list item I want to make repeatable…

 <li class="nav-item cms-repeatable">
     <a class="nav-link" id="tabControl-2" data-toggle="tab" href="#tab-2" role="tab" aria-controls="tab-2" aria-selected="false">tab 2</a>`

So to make this happen shouldn’t I be able to do something like…

        $(document).ready(function() {
            if (window.isCMS) {
                var myElement = document.querySelector('.cms-repeatable > .navlink');
                myElement.setAttribute('aria-selected', 'false');

Obviously, this only takes care of that specific attribute, but theoretically, this could be extended to other attributes and by using a loop to automatically iterate and edit the strings in the attribute values each time a new one is generated?

Does anybody have thoughts on this?


This is definitely possible if you’re comfortable writing the JavaScript. The rule of thumb is to not leave those attributes behind when the page is published, so as long as you’re using window.isCMS you’ll be in good shape.

Another thing I see window.isCMS used a lot with is exposing hidden tab panes, accordions, etc. in the editor. It can be quite a powerful tool :slight_smile: