JQuery Accordion doesn't work in Dreamweaver


#1


Hello! I'm trying to figure out why my "default" accordion doesn't work. Is that a DW problem? Could be any conflict between Bootstrap and jQuery in that case? The same accordion in codecademy runs well.
https://www.codecademy.com/en/courses/web-beginner-en-jtFIC/2/3
Thank you a lot.


<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="myScript.js"></script>

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="Exhibitio0.css">
<title>The south brushes exhibition</title>

</head>

<body> 

<h1>the south brushes <b>exhibition</b></h1>
<div id="menu">
            <h3>12.1 Simple tenses</h3>
            <div>
                <p>Presente</p>
                <p>Imperfetto</p>
                <p>Passato remoto</p>
                <p>Futuro</p>
            </div>
            <h3>12.2 Compound tenses</h3>
            <div>
                <p>Passato prossimo</p>
                <p>Futuro anteriore</p>
                <p>Trapassato prossimo</p>
                <p>Trapassato remoto</p>
            </div>
            <h3>12.3 Italian impersonal form</h3>
            <div>
                <p>"Essere" + "aggettivo"</p>
            </div>            
</body>
</body>
</html>

$(document).ready(function(){
    $('#menu').accordion();
    });


#2

Hey Edwinnaelbert,

Your HTML code is in a file called index.html, and this part at the very bottom of your code is in a file called myScript.js, right?

$(document).ready(function(){
    $('#menu').accordion();
    });

#3

Yes, they are placed in different files (html and js accordingly). Sorry there are 20 days left but the topic is still important - I haven't seen notifications on codecademy.com and I've found your reply in spam just now.


#4

@edwinnaelbert OK, so I put your code in a Pen and it works:

How are you viewing the page? After you save it from Dreamweaver, if you double click on it, does it open in your browser?


#5

Mystic. On codepen everything's fine.



Tried to delete css file (with removing link), didn't help.


#6

Tried to change path of the index and js files in order to have all path in latin script. Didn't help.


#7

@edwinnaelbert Oh, here's your problem:

   6| <script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
7-10| ...
  11| <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">

Place https: before the double slashes (//) at the beginning of that URL, and it will work :slight_smile:

The reason it's not currently is because // is a protocol-relative URL. These were a good idea several years ago, when people didn't feel that everything needed to be on HTTPS, but now stuff has changed and it's considered a bad practice to use these now. The way a protocol-relative URL works is, if you access the site over HTTP, it will try to fetch the resource via HTTP. If you visit via HTTPS, it will try to use HTTPS to fetch the resource. And it's the same with any other protocol, including the one you're using to view the HTML file here, the file protocol. The problem is, file:// is only for local files stored on your computer, and not for files on a remote server, and those two resources are on remote servers. So changing that to https:// instead should fix the problem :slight_smile:


#8

Thank you a lot, zystvan, I take my hat off to you)


#9

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.