Write separate css and js file

Question

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_js_collapsible_animate

has a nice example. I want the first part

<style>
.collapsible {
  background-color: #777;
  color: white;
  cursor: pointer;
  padding: 18px;
  width: 100%;
  border: none;
  text-align: left;
  outline: none;
  font-size: 15px;
}

.active, .collapsible:hover {
  background-color: #555;
}

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

and the javascript part

<script>
var coll = document.getElementsByClassName("collapsible");
var i;

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

in separate files. I created the first part as test.css and the second part as test.js. I then did

<head>
<link rel="stylesheet" href="test.css">
</head>

and

<script src="test.js"></script>

but did not work. What should I have done?

Answer 1

In the 'test.css' file you should remove the <style> , same for the 'test.js' with the <script> tag.

Make sure that the files are in the same level in your folder and then it should work.

You should also put this in the top of your css file:

* {
maring: 0;
padding: 0;
box-sizing: border-box;

}

If it still doesn't work you might want to check if the code is correct. You can do this by just putting everyting in the native html file.

Hope this works!

Write separate css and js file

Question

1 answers

solution1
0 2021-03-27 16:05:13

Write separate css and js file

Question

1 answers

solution1 0 2021-03-27 16:05:13

solution1
0 2021-03-27 16:05:13