GitHub Community
Particular section(COLLAPSIBLE CARD) works well in Local but doesn't expands on github webpage #23295
-
|
My webpage works well in local HTML file . But there is some problem in a section when I uploaded the page on github. The problem is actually with the file elements.html(‘PROJECTS’ section of the webpage ) . It is actually a COLLAPSIBLE PAPER CARD ( https://bbo-code.com/components/paper-collapse ) which expands when you click on it . But due to some reason I don’t know why the cards doesn’t expands on my webpage and the information inside the card is not shown at all. This works fine when I run the local HTML file. So please help me fix it .
|
Beta Was this translation helpful? Give feedback.
Replies: 1 comment
-
|
Hi, @amangupt01! This sort of trouble is commonly caused by incorrect file paths. A great way to diagnose these issues is using your browser’s development tools, specifically its console. Most browsers offer such functionality: Inspecting your site with my browser’s console, I spotted some helpful 404 errors, suggesting a CSS stylesheet named paper-collapse.min.css and a JavaScript file named paper-collapse.min.js were failing to load. Digging a little deeper, I noticed that these files were referenced as …/paper-collapse.min.css and …/paper-collapse.min.js in your HTML:
The …/ components of those URLs tell the browser to look for those files in a directory (folder) one level above that of the HTML file they are referenced in. However, we can see from your repository that the relevant files are actually in the same directory as the HTML file, not its parent directory. That is to say, all of these files are in the root of your repository: https://github.com/amangupt01/paper-collapse I suspect this trouble arose because your index.html file was originally copied from the “demo” subdirectory, where these links would have been correct. You can resolve this trouble by removing the …/ components from the URLs in your HTML. For example, you could replace this line: with this line: I hope that helps! Friday |
Beta Was this translation helpful? Give feedback.
Hi, @amangupt01!
This sort of trouble is commonly caused by incorrect file paths. A great way to diagnose these issues is using your browser’s development tools, specifically its console. Most browsers offer such functionality:
Inspecting your site with my browser’s console, I spotted some helpful 404 errors, suggesting a CSS stylesheet named paper-collapse.min.css and a JavaScript file named paper-collapse.min.js were failing to load. Digging a little deeper, I noticed that these files were referenced as …/paper-collapse.min.css and …/paper-collapse.min.js in your HTML: