8OO

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

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. 

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)"

 

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") {

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>

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>

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