Jump to content
8OO

Accordion Issue

Recommended Posts

Having a big issue with something seemingly difficult. 

I'm working in Percussion CM1 (a content editing system) to create an accordion for a few of my webpages, but  for some odd reason, it doesn't want to open or collapse. Everything else works such as the hover function and what not, but the sections when clicked do not open. 

It works on W3 (obviously) and it works on Notepad++ but it doesn't work on CM1. 

Here's my original code:

        <style>
        .accordion {
          background-color: #eee;
          color: #444;
          cursor: pointer;
          padding: 18px;
          width: 100%;
          border: none;
          text-align: left;
          outline: none;
          font-size: 15px;
          transition: 0.4s;
        }

        .active, .accordion:hover {
          background-color: #ccc; 
        }

        .panel {
          padding: 0 18px;
          display: none;
          background-color: white;
          overflow: hidden;
        }
        </style>

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <pLorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

    <script>
    var acc = document.getElementsByClassName("accordion");
    var i;

    for (i = 0; i < acc.length; i++) {
      acc.addEventListener("click", function() {
        this.classList.toggle("active");
        var panel = this.nextElementSibling;
        if (panel.style.display === "block") {
          panel.style.display = "none";
        } else {
          panel.style.display = "block";
        }
      });
    }
    </script>

Two things I find interesting:

1) Anytime I insert the code into CM1, CDATA ends up in my JavaScript and seems to block it from working  (see code below):

<script>// <![CDATA[
//<![CDATA[var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc.addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                  panel.style.display = "none";
                } else {
                  panel.style.display = "block";
                }
          });
        }
        
//
// ]]></script>

2) When I reached out to one of the technicians at CM1 they told me that this was the issue (see attached image as well) and I'm not too sure what it means:

"Once it's within CMS (CM1) code, the the next sibling would be different than when the code is run independent.  Please try and identify the element we would want to target keeping CMS tags in account to address the issue.  Page source would indicate that additional <p> and <div> tags are included when published from CMS."

2) When I reached out to one of the technicians at CM1 they told me that this was the issue (see attached image as well):. I'm a little new to JavaScript and still leanring but I thought this would easily work. Instead it's been a headache for a week... If there's anyone that could help out with this, that'd be great! I would like to figure out what #2 of my interest is, since it's something that one of their techs said, but if anyone could help define/advise for both, that would be thoroughly appreciated.  

T

elementError.PNG

Share this post


Link to post
Share on other sites

It would be better if you used a code block on the forum here to post your code.

If your CMS is adding code to effectively comment out the first line of your Javascript, maybe just add your own comment as the first line.

Share this post


Link to post
Share on other sites

In the developers elements view you have, it seems, the button within a paragraph, so when it tries to transverse to next sibling (the 'panel' class element) it does not exist as its the only element within the paragraph.

This might be due to "<pLorem" (note the missing closing angled bracket), which will mess up where how the paragraph is interpreted and closed.

Share this post


Link to post
Share on other sites
38 minutes ago, dsonesuk said:

In the developers elements view you have, it seems, the button within a paragraph, so when it tries to transverse to next sibling (the 'panel' class element) it does not exist as its the only element within the paragraph.

This might be due to "<pLorem" (note the missing closing angled bracket), which will mess up where how the paragraph is interpreted and closed.

It's weird because even if I take the exact code from W3 Schools on how to make an Accordion (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion), it still doesn't work. Everything is fine except that the text doesn't show at all when the button is clicked. I'm not sure if it's something on my CMS because it adding stuff to the code. I'm really not sure what's going on. It's auto adding Java Script comments and the CDATA when I put it in

<script>// <![CDATA[
//<![CDATA[var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
//
// ]]></script>
</div>

 

Share this post


Link to post
Share on other sites
1 hour ago, justsomeguy said:

It would be better if you used a code block on the forum here to post your code.

If your CMS is adding code to effectively comment out the first line of your Javascript, maybe just add your own comment as the first line.

Sorry about that, first time using these forums.

Tried that but didn't work. It's just reading over the comment I inserted.

On one hand I think this CDATA code, inserted by my CMS, is screwing it up. I'm not sure what it is or what it does (still new to JavaScript), but I definitely don't think it should be there as it wasn't found in the original code from W3 Schools (https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_accordion). 

On the other hand my CMS technician is saying that the error is coming from this line (see image attached):

    if (panel.style.display === "block") {

So I'm unsure what to do here.... Below is the code from my CMS which adds the CDATA

<script>// <![CDATA[
//<![CDATA[
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                  panel.style.display = "none";
                } else {
                  panel.style.display = "block";
                }
          });
        }
        
//
// ]]></script>

 

elementError.PNG

Share this post


Link to post
Share on other sites

Yeah, the CMS is breaking it because it decided to comment out your first line of code.  That's why I suggested adding your own comment as the first line.  If it's going to comment out the first line of your code then make the first line not matter.

Share this post


Link to post
Share on other sites

If the "accordion" button is inside a <p> element,  and it's the only thing in the <p> element, then like dsonesuk said it's not going to work because the Javascript looks for the accordion's next sibling.  If it's inside an element by itself then it has no sibling.  Review the markup on the w3schools site to see how it's set up, the div should be right next to the button.

Share this post


Link to post
Share on other sites
36 minutes ago, justsomeguy said:

If the "accordion" button is inside a <p> element,  and it's the only thing in the <p> element, then like dsonesuk said it's not going to work because the Javascript looks for the accordion's next sibling.  If it's inside an element by itself then it has no sibling.  Review the markup on the w3schools site to see how it's set up, the div should be right next to the button.

I compared the code from W3 to the code sent by the CMS tech and there's extra paragraphs being added to the buttons which I would assume is causing all these issues.

Here's the original code:

<h2>Accordion</h2>

<button class="accordion">Section 1</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 2</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<button class="accordion">Section 3</button>
<div class="panel">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<script>
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

 

And here's the code from my CMS editor which is adding all these extra paragraph elements to the button:

<h2>Accordion</h2>
<p><button class="accordion">Section 1</button></p>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p><button class="accordion">Section 2</button></p>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<p><button class="accordion">Section 3</button></p>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<script>// <![CDATA[
//<![CDATA[
        var acc = document.getElementsByClassName("accordion");
        var i;

        for (i = 0; i < acc.length; i++) {
          acc[i].addEventListener("click", function() {
                this.classList.toggle("active");
                var panel = this.nextElementSibling;
                if (panel.style.display === "block") {
                  panel.style.display = "none";
                } else {
                  panel.style.display = "block";
                }
          });
        }
        
//
// ]]></script>

 

I never realized that until I really looked at what both you and dsonesuk. That's why I've been wondering why it worked perfectly fine on Notepad++ and the tech person kept telling me I was wrong. I'll talk to them to see if there's anything that can be done remove those extra paragraph elements from being auto added. Do you think that would solve this whole issue with the CDATA/JavaScript comment and this line?

 if (panel.style.display === "block") {

 

Share this post


Link to post
Share on other sites

The CDATA sections aren't really a problem, they're not necessary at all but they're inside comments and aren't going to break anything.  The extra elements mean that this line doesn't work:

var panel = this.nextElementSibling;

That's why you're getting the error message about panel being null.  If you can't do anything about the paragraphs then you can change that line to get this.parentNode.nextElementSibling instead.

Share this post


Link to post
Share on other sites
4 minutes ago, justsomeguy said:

The CDATA sections aren't really a problem, they're not necessary at all but they're inside comments and aren't going to break anything.  The extra elements mean that this line doesn't work:

 


var panel = this.nextElementSibling;

 

That's why you're getting the error message about panel being null.  If you can't do anything about the paragraphs then you can change that line to get this.parentNode.nextElementSibling instead.

Tried changing that line, but it's still not working, unfortunately... Although I'm not sure if it's because the extra paragraph elements are screwing it up.

This is what the tech person said:

"Once it's within CMS code, the the next sibling would be different than when the code is run independent.  Please try and identify the element we would want to target keeping CMS tags in account to address the issue.  Page source would indicate that additional <p> and <div> tags are included when published from CMS.

Uncaught TypeError: Cannot read property 'style' of null
    at HTMLButtonElement.<anonymous> (accordian.html:52)"


 

Share this post


Link to post
Share on other sites

Place all the accordion buttons and div text content within a div container. Then it might not add the paragraphs.

IF that does not work, use div tag instead of button tags, paragraphs should not wrap div tags as it will become invalid html.

https://www.w3schools.com/code/tryit.asp?filename=G6Z50O6W6G2F

Wordpress is the same, but you have a setting to prevent that happening.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Are you adding  extra '//<![CDATA[' ?

Try adding only

	//required for cdata conflict
	var acc = document.getElementsByClassName("accordion");
	

Share this post


Link to post
Share on other sites
12 minutes ago, dsonesuk said:

Are you adding  extra '//<![CDATA[' ?

Try adding only

 


	//required for cdata conflict
	var acc = document.getElementsByClassName("accordion");
	

 

So good news is that adding a div to contain everything, like you said, got rid of extra paragraphs being added. Bad news, it's still not working...

I'm not adding it at all actually, it's being auto added by my CMS editing program, CM1. Any time I directly copy and paste the JavaScript section of the accordion code in, it just adds CDATA in there. I'm not even sure what it stands for or what it does. When placed in Notepad++ (the editor I use before putting into CM1), I notice that when I test it, the text doesn't come out, which is the same problem I have in CM1. But when I remove CDATA and make it like the original accordion code from W3 schools, it works perfectly fine. I've tried to remove it on CM1, but it keeps coming back.... Not sure what to do. 

Share this post


Link to post
Share on other sites

Also the tech advisor from CM1 just got back to me right now and this is what she said:

In CM1 we can't exclude the <p> tag instead we can try and update the JS to look for the elements under <p> tag and process them.
 

var list = document.getElementsByTagName("p");


You can then iterate through the list and find the divs to process them.
 

list.getElementsByTagName("div")[0]

I'm not sure where list.getElementsByTagName("div")[0] goes in the original code or if it would work and remove the CDATA thing, since I'm not familiar with JavaScript

Share this post


Link to post
Share on other sites

That is no help at all!

Did you add '//required for cdata conflict' to beginning  of your code?

As i said you shouldn't have a div within a paragraph in the first place and its the paragraph  round inline element button thats the problem.

Edited by dsonesuk

Share this post


Link to post
Share on other sites
1 hour ago, dsonesuk said:

That is no help at all!

Did you add '//required for cdata conflict' to beginning  of your code?

As i said you shouldn't have a div within a paragraph in the first place and its the paragraph  round inline element button thats the problem.

I'm not sure if I'm just too frustrated by this that I'm not writing the code correctly or just overlooking things, but this is what I placed on Notepad++ and had no issues when testing and running it on Chrome (I included the div container and the "//required for cdata conflict"):

<h2>Accordion</h2>
	<div>
		<button class="accordion">Section 1</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>

		<button class="accordion">Section 2</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>

		<button class="accordion">Section 3</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>
	
<script>
//required for cdata conflict
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

 

When I take that code and put it into the CM1 editor, this is what it gives back:

<h2>Accordion</h2>
	<div>
		<button class="accordion">Section 1</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>

		<button class="accordion">Section 2</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
		
		<button class="accordion">Section 3</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>
	
<script>// <![CDATA[
//<![CDATA[//required for cdata conflict
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
//
// ]]></script>

 

The CDATA just writes over what you wanted me to add. I'm really unsure why it's happening. I'm sorry if I'm sounding dumb for not figuring this out or not putting my code together correctly. I really thought that an accordion would be an easy thing to make and add to my webpage...

Also for the forum, do I need to always hit the quote button to reply to you and for you to be notified to see it?

Share this post


Link to post
Share on other sites

I'm really unsure why it's happening.

Bad programming.

The CDATA just writes over what you wanted me to add.

That's OK, that's the point of making the first line a useless comment.

The code you're showing should work fine.  Are you getting any error messages?

Share this post


Link to post
Share on other sites

CM1 doesn't give any error messages, unfortunately. It's more like if it works, it works. If it doesn't work, you have to figure out what's wrong (it's a terrible CMS program, everyone hates using it).  The only error message is what the tech advisor showed me on the image she provided, however, the <p> tags are added to her code, which are not part of the original code at all. 

I added a comment to the first line in the JavaScript (unless I did it incorrectly)

<h2>Accordion</h2>
	<div>
		<button class="accordion">Section 1</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>

		<button class="accordion">Section 2</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>

		<button class="accordion">Section 3</button>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
		</div>
	</div>
	
<script>
//Random Comment HERE
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
</script>

Then placed it into CM1 and this is what it gave me:

<h2>Accordion</h2>
<div><button class="accordion">Section 1</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 2</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
<button class="accordion">Section 3</button>
<div class="panel">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>
</div>
<script>// <![CDATA[
//<![CDATA[//Random Comment HERE
var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
  acc[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var panel = this.nextElementSibling;
    if (panel.style.display === "block") {
      panel.style.display = "none";
    } else {
      panel.style.display = "block";
    }
  });
}
//
// ]]></script>

 

CDATA just gets added randomly from CM1. I guess that's the error message? When I run the code with the comment on Notepad++, it's perfectly fine and runs how it's supposed to (see Notepad images), but when I insert it into CM1, the text doesn't appear when the button is clicked (see CM1 result image). 

Notepad Code.png

Notepad Code Result.png

CM1 Result.png

Share this post


Link to post
Share on other sites

Oops didn't know that the images are automatically shown...

The first image is from Notepad++

The second image is the test page on Chrome from Notepad++

The third image is the test page on CM1 where the accordion is displayed but doesn't show the text when clicked

Share this post


Link to post
Share on other sites
42 minutes ago, justsomeguy said:

 

That's OK, that's the point of making the first line a useless comment.

 

3 hours ago, dsonesuk said:

Did you add '//required for cdata conflict' to beginning  of your code?

I just realized both you and dsonesuk had the same idea actually inserting a comment on the first line

Share this post


Link to post
Share on other sites

I meant error messages from your browser, not the CMS.  Open your browser's developer tools and check on the Console tab for Javascript error messages.

Share this post


Link to post
Share on other sites

I used my code on Notepad++, ran it on Chrome, right clicked on the test page to Inspect Element, and then went to the Console tab. Unless the steps I did were incorrect, I don't see any issues in regards to the JavaScript. It's blank

Chrome Console.png

Share this post


Link to post
Share on other sites

It should work? I tested it it works fine.

Press ctrl F5, and clear cms cache if it has it, and browser history.

Your console result look like its from notpad not cms

Share this post


Link to post
Share on other sites

Should've figured, my bad. There is actually an error on there. I'll place the highlighted error below along with the JavaScript. It gets real crazy on when JavaScript comes in.

	<h2>Accordion</h2>
		<div>
			<button class="accordion">Section 1</button> 
			<div class="panel">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
			
			<button class="accordion">Section 2</button> 
			<div class="panel">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
			
			<button class="accordion">Section 3</button>
			<div class="panel">
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
			</div>
		</div>

<script>/*<![CDATA[*/]]><![CDATA[
//<![CDATA[//Random Comment HERE]]><![CDATA[
var acc = document.getElementsByClassName("accordion");]]><![CDATA[
var i;]]><![CDATA[

for (i = 0; i < acc.length; i++) {]]><![CDATA[
  acc[i].addEventListener("click", function() {]]><![CDATA[
    this.classList.toggle("active");]]><![CDATA[
    var panel = this.nextElementSibling;]]><![CDATA[
    if (panel.style.display === "block") {]]><![CDATA[
      panel.style.display = "none";]]><![CDATA[
    } else {]]><![CDATA[
      panel.style.display = "block";]]><![CDATA[
    }]]><![CDATA[
  });]]><![CDATA[
}]]><![CDATA[
//]]><![CDATA[
/*]]>*/</script>

The error is different than what the CMS tech advisor had. But I'm assuming that the CDATA is preventing the JavaScript from functioning since it's all over it

CMS Console Error.png

Share this post


Link to post
Share on other sites

Change comment from

//Random Comment HERE

To

/*Random Comment HERE*/

Mind you if this does not work, its probably better to remove the code from here and place in external file and link to that, if its not in actual page it can't add cdata comments.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...