Jump to content

8OO

Members
  • Content Count

    33
  • Joined

  • Last visited

Posts posted by 8OO

  1. I was setting up content that was left and right aligned along with a responsive table and it worked out perfectly on Notepad++ and W3 Schools

    But then, I put it into my CMS editor, CM1 and it got all jacked up (as per usual...). The table content is moved inside for some odd reason....1908819791_CM1Error.thumb.png.f9a6e4b4f7b2bbced997ab7f307b8c84.png

     

    When I saw this I thought, I'll just add a few <br> tags before the table content to move it down. It fixed one problem, but created another. So when my table gets to a smaller window size, there's too much white space between the Address/Telephone line and the table and it's super annoying...1937474761_CM1Error-Largegapusingbrtag.thumb.png.dd8689568ca6d715a6633c97d9aec1a8.png  

    Is there a way this could be fixed so it's like the way I originally have it where everything is correctly spaced out? I'm pretty sure it's an issue with my HTML code, but I'm not sure as to what is causing the issue in CM1

    Here's my code that works the way I would like it to on Notepad++ and W3 schools:

     

    CSS

    <head>
    	<style>
    		@media screen and (min-width: 901px) {
    			.alignleft {
    				float: left;
    			}
    			.alignright {
    				float: right;
    			}
    		}
    		tr:hover td{background-color:#ffff99;}
    	
    		th {
    			color: white;
    			font-size: 18px;
    		}
    		
    		table {
    			border-collapse: collapse;
    			margin: 0;
    			padding: 0;
    			width: 100%;
    			table-layout: fixed;
    		}
    
    		.link {
    			color: #c69906;
    		}
    		
    		td {
    			word-wrap: break-word;
    		}
    				
    		@media screen and (max-width: 900px) {
    			table {
    				border: 0;
    			}
    
    			table thead {
    				border: none;
    				clip: rect(0 0 0 0);
    				height: 1px;
    				margin: -1px;
    				overflow: hidden;
    				padding: 0;
    				position: absolute;
    				width: 1px;
    			}
    		
    			table tr {
    				border-bottom: 3px solid #ddd;
    				display: block;
    				margin-bottom: .625em;
    			}
      
    			table td {
    				border-bottom: 1px solid #ddd;
    				display: block;
    				font-size: .8em;
    				text-align: right;
    			}
      
    			table td::before {
    				content: attr(data-label);
    				float: left;
    				font-weight: bold;
    				text-transform: uppercase;
    			}
    			
    			table td:last-child {
    				border-bottom: 0;
    			}
    		}
    	</style>
    </head>

     

    HTML

    <h1 style="text-align:center;"><b><u>Title Here</b></u></h1>
    <br>
    <br>
    
    <div>
    	<div class="alignleft">
    		<div><b>Location and Mailing Address:</b></div>
    		<div>ABC</div>
    		<div>DEF</div>
    		<div>GHI</div>
    		<br>
    	</div>
    	
    	<div class="alignright">
    		<div><b>Telephone:</b><a href="tel: 610-867-5309">Ex. #</a><span></div>
    	</div>
    	<div style="clear: both;"></div>
    </div>
    
    
    <h2>More Info Here</u></h2>
    <div style="overflow-x: auto;">
    <table style="width:100%">
    	<thead>
    		<tr style="background: linear-gradient(to right, #66002b 0%, #cc0055 100%);">
    			<th scope="col"><b>Cat. 1</b></th>
    			<th scope="col"><b>Cat. 2</b></th>
    			<th scope="col"><b>Cat. 3</b></th>
    			<th scope="col"><b>Cat. 4</b></th>
    			<th scope="col"><b>Cat. 5</b></th>
    		</tr>
    	</thead>
    	
    	<tbody>
    		<tr>
    			<td data-label="Name"><b>Name Here</b></td>
    			<td data-label="Email">Email Here</td>
    			<td data-label="Location">Location Here</td>
    			<td data-label="Phone">Phone Here</td>
    			<td data-label="Title">Title Here</td>
    		</tr>
    	
    		<tr>
    			<td data-label="Name"><b>Name Here</b></td>
    			<td data-label="Email">Email Here</td>
    			<td data-label="Location">Location Here</td>
    			<td data-label="Phone">Phone Here</td>
    			<td data-label="Title">Title Here</td>
    		</tr>
    	</tbody>
    </table>
    <br>
    <br>

     

  2. So I'm assuming that for my CMS anytime I need to use JavaScript in my code for some of the stuff shown in W3, I would need to use this in order for it to run?

    document.addEventListener("DOMContentLoaded", function(){
  3. AT LONG LAST, IT FINALLY WORKS!!!! @dsonesuk & @justsomeguy, THANK YOU BOTH SO MUCH FOR ALL YOUR HELP!! I finally got the code to work for my CMS!

    Putting this down for anyone struggling with accordions on their CMS:

    Accordion.js (External JavaScript File):

    document.addEventListener("DOMContentLoaded", function(){
    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";
        }
      });
    }
    });

     

    CSS & JavaScript in <head>:

    <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>
    
    <script src="Accordion.js"</script>

    HTML

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

     

  4. Oh I see...

    So you're saying Accordion.js should be:

    document.addEventListener("DOMContentLoaded", function(){
    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";
        }
      });
    }

     

    And then the head, should be this:

    <script type = "text/javascript" src="Accordion.js" ></script>

    Right? I apologize for repeatedly asking if it's written correctly, I just want to make sure I'm not missing what you and @dsonesuk are saying

  5. On 8/16/2019 at 4:14 PM, dsonesuk said:

    Any code that references a element by id, classname will go in that code. So yes ALL the accordion code.

    Usually with named functions its not necessary as they haved to be called specifically, but any calling of these function must be in onload event function

    Just to point out, The EXTERNAL .js file does not require script tags in it.

    So if the JavaScript was placed in the head (not in an external sheet), it should be like this, I would assume:

    <script>
    document.addEventListener("DOMContentLoaded", function(){
    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>

     

    But how would that work with the External Sheet file path (the real path is actually longer than this)? Is this correct?

    <script>
    document.addEventListener("DOMContentLoaded", function(){
    <script src="Accordian.js">
    });
    </script>

     

  6. IT WORKED!!!!

    Thank you @dsonesuk for the explanation and thank you @justsomeguy for providing the line of code. Don't think I would've even got this far without you guys! The example finally worked and I can finally run JavaScript on my CMS! I hope now we'll be on the home stretch with this accordion issue. 

    Right now my code for the Accordion is looking like this:

    <head>
    <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>
    </head>
    
    <body>
    <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>
    </body>

     

    And the JavaScript in a separate external file(the filename is Accordion.js): 

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

    So with the JS being in an external file and with it in a different file path from the page I want it on,  how would I get this line to work and make the JS for the accordion to work?

    document.addEventListener("DOMContentLoaded", function(){
    // code to run when the DOM is fully loaded
    });

     

  7. I'm pretty brand new to Javascript, so please forgive my lack of knowledge, but where would I place this exactly?

    Would I replace this: 

    <script>
    document.getElementById("myBtn").addEventListener("click", function() {
      alert("Hello World!");
    });
    </script>

    With this?:

    <script>
    document.getElementById("myBtn").addEventListener("DOMContentLoaded", function(){
      // code to run when the DOM is fully loaded
    });
    
    function myFunction() {
      alert ("Hello World!");
    }
    </script>

    This is the example I'm using btw from W3:

    https://www.w3schools.com/js/tryit.asp?filename=tryjs_addeventlistener_add

  8. So I tried the code here from W3 Schools, as test, (https://www.w3schools.com/js/js_htmldom_eventlistener.asp) into my CMS and it still didn't work.

    I added this into the head/meta-data (not as a JS file):

    <script>
    document.getElementById("myBtn").addEventListener("click", myFunction);
    
    function myFunction() {
      alert ("Hello World!");
    }
    </script>

    And this into the HTML portion of the editor:

    <h2>JavaScript addEventListener()</h2>
    
    <p>This example uses the addEventListener() method to execute a function when a user clicks on a button.</p>
    
    <button id="myBtn">Try it</button>

     

  9. This is the example I used from W3:

    <html>
    <head>
    <script>
    function myFunction() {
      alert("Page is loaded");
    }
    </script>
    </head>
    
    <body onload="myFunction()">
    <h1>Hello World!</h1>
    </body>
    
    </html>

    I just removed the alert function from mine

  10. 1 hour ago, justsomeguy said:

    So something like this then?

    <head>
    	<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>
      
    	<script>
          function accordion(){
          }
        </script>
    </head>
    
    <body onload="accordion()">
    <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>

     

  11. 2 minutes ago, justsomeguy said:

    If you're loading the Javascript in the head instead of the body then you need to use a window load handler to run the code after the page finishes loading.

    How does that work?

  12. 16 hours ago, dsonesuk said:

    It look as though you may have to use there widget  builder ,where you give it a name add link to uploaded css/js files or add script code in widget itself.

    https://help.percussion.com/percussion-cm1/developers/widget-builder/index

    Okay so, I'm actually able to create and add a separate Javascript file to add to the page. However, it's still not working. This is what the tech advisor said:

    ...I see that the published JS file is getting loaded from the page source.  The accordian isn't working even in the CMS preview.  Probably needs JS code update based on HTML element structure.  Please review the HTML source and JS file to have it working in CMS and then republish the page.  

    This is how the body of my HTML code looks like now:

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

     

    And here's the JavaScript for the accordion, now in a separate file:

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

     

    Is there really anything I need to change? Because I feel like the structuring should be fine, despite they've now been separated. I'm calling for the JavaScript from a filepath into the head of my HTML code (which she stated is correctly written). Just to note the head of webpage is called, "Meta-data", and is separate from the body HTML where it's placed in the editor's, "Source Code" (see images below).

     

  13. 20 minutes ago, dsonesuk said:

    Better cms allow you add custom js,css files or add to specific css/js files for you to use. Then you add links to them either in between head tags or bottom of document.

    https://www.w3schools.com/css/css_howto.asp

    https://www.w3schools.com/tags/att_script_src.asp

    I wish I had a better CMS.... Percussion CM1 is really awful to work with. If I can't even get a simple accordion done, I don't think I can even do any other small, but cool web features.

    I'll ask them if that's possible to do, but in the instance it's not, should I give up on making an accordion then?

  14. 11 minutes ago, justsomeguy said:

    Yeah it's going nuts trying to figure out the CDATA crap, look at all of the stuff it added.  Don't just paste all of that back in to the CMS, you need to remove all of the CDATA stuff and paste your original code back in.

    I've gone over it numerous times.

    I go into the CMS, I add my original code (with no errors) in the editor source code, I preview it, then it doesn't work. I go back to the source code in the editor. It provides me with the extra CDATA code I provided to you guys (not the browser one). I delete that source code with the CDATA error and add my original code, doesn't work. Rinse and repeat. It's crazy...

  15. Didn't work unfortunately...

    And as far as I see, I don't think the CMS program allows for an external file sheet to be used, although I've never done it before. How does that usually work for other CMS programs? I've always seen the reference links on CSS examples, but I've never done that on Notepad++ or on CM1.

  16. 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

  17. 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

  18. 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

  19. 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

  20. 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

  21. 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?

×
×
  • Create New...