Jump to content

8OO

Members
  • Content Count

    31
  • Joined

  • Last visited

Community Reputation

0 Neutral

About 8OO

  • Rank
    Newbie
  1. 8OO

    Accordion Issue

    Got it! I'll make sure to do that then. Hopefully I won't have any more issues with any more things I would like to take from W3. Once again, thanks @justsomeguy and @dsonesuk, your help on this has been truly appreciated!
  2. 8OO

    Accordion Issue

    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. 8OO

    Accordion Issue

    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. 8OO

    Accordion Issue

    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. 8OO

    Accordion Issue

    I figured as much. So would this work then: <script type = "text/javascript" src="Accordion.js" ></script>
  6. 8OO

    Accordion Issue

    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>
  7. 8OO

    Accordion Issue

    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 });
  8. 8OO

    Accordion Issue

    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
  9. 8OO

    Accordion Issue

    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>
  10. 8OO

    Accordion Issue

    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
  11. 8OO

    Accordion Issue

    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>
  12. 8OO

    Accordion Issue

    How does that work?
  13. 8OO

    Accordion Issue

    Shoot looks I'm out of space to upload images... But I linked the images on imgur: https://imgur.com/a/0nErMaB
  14. 8OO

    Accordion Issue

    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).
  15. 8OO

    Accordion Issue

    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?
×
×
  • Create New...