CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user310291
user310291

Reputation: 38190

Why does this code doesn't work in jsfiddle

I tried to make this code http://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_accordion work on jsfiddle https://jsfiddle.net/u6qdfw5f/ but it doesn't work why ?

    <!DOCTYPE html>
<html>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css">
<body>

<div class="w3-container">
<h2>Accordions</h2>
<p>An accordion is used to show (and hide) content that is broken into sections:</p>

<div class="w3-accordion w3-light-grey">
    <button onclick="myFunction('Demo1')" class="w3-btn-block w3-left-align w3-show">Open Section 1</button>
    <div id="Demo1" class="w3-accordion-content w3-container w3-show">
    <h4>Section 1</h4>
    <p>Some text..</p>
    </div> 
    <button onclick="myFunction('Demo2')" class="w3-btn-block w3-left-align w3-show">Open Section 2</button>
    <div id="Demo2" class="w3-accordion-content w3-container w3-show">
    <h4>Section 2</h4>
    <p>Some other text..</p>
    </div>
</div>
</div>

<script>
function myFunction(id) {
    var x = document.getElementById(id);
    if (x.className.indexOf("w3-show") == -1) {
        x.className += " w3-show";
    } else { 
        x.className = x.className.replace(" w3-show", "");
    }
}
</script>

</body>
</html>

Upvotes: 1

Views: 590

Answers (2)

Ionut Necula
Ionut Necula

Reputation: 11472

The problem is because the CSS is not loading. If you check the console you can see an error like GET https://www.w3schools.com/lib/w3.css net::ERR_INSECURE_RESPONSE. Add the CSS on the right top section of the fiddle.

This happens because that link contains https while w3schools website does not have a secured certificate. If you try to access https://www.w3schools.com/lib/w3.css on the browser you will get an privacy error. Adding http instead of https and it will work in browser.

http file won't work in jsfiddle https because it's considered unsafe. You will get an error in the console like:

Mixed Content: The page at 'https://jsfiddle.net/u6qdfw5f/1/' was loaded over HTTPS, but requested an insecure stylesheet 'http://www.w3schools.com/lib/w3.css'. This request has been blocked; the content must be served over HTTPS.

I've also added the javascript load type to be No wrap - in <head> from the javascript dropdown, instead of the default onLoad, otherwise you will get an error like Uncaught ReferenceError: myFunction is not defined

Updated FIDDLE.

Upvotes: 4

Rory McCrossan
Rory McCrossan

Reputation: 337560

Your main issue with the JS code not working is because you've set the 'Load type' in settings to execute when document.ready fires. This means that the myFunction() definition is not in scope of the calling onclick attribute.

Secondly, the w3.css file path in the external files list is incorrect. You used https:// yet the W3Schools site does not have an SSL certificate so the request fails. You should use a http:// link instead.

With those changes made, the code works: Updated fiddle

You should however note that the code in the W3Schools example is a little outdated. To follow modern best practices you should use unobtrusive event handlers over on* attributes, and also you can use the classList to toggle classes on and off without the need for an if statement. Try this updated version:

document.querySelectorAll('.w3-btn-block').forEach(function(el) {
  el.addEventListener('click', function() {
    var x = document.getElementById(this.dataset.target);
    x.classList.toggle('w3-show');
  })
})
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

Alternatively, as you've tagged the question with jQuery, you could use that:

$('.w3-btn-block').click(function() {
  var x = $(this.dataset.target);
  x.toggleClass('w3-show');
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" />

<div class="w3-accordion w3-light-grey">
  <button data-target="#Demo1" class="w3-btn-block w3-left-align">
    Open Section 1
  </button>
  <div id="Demo1" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
  <button data-target="#Demo2" class="w3-btn-block w3-left-align">
    Open Section 2
  </button>
  <div id="Demo2" class="w3-accordion-content w3-container">
    <p>Some text..</p>
  </div>
</div>

Also note that I strongly suggest that you do not use W3Schools as a reference. Their tutorials are often out of date - as you can see from the above improvements - and sometimes they're even completely wrong and spread incorrect information.

If you want a good reference for JS code, use MDN, and for jQuery, use the official documentation

Upvotes: 1

Related Questions