jQuery ui Dialog not working when clicked to button

Question

I'm trying to modify a web page template which is based on bootstrap and jquery. I tried to add a dialog like in this page but it's not working. (It's the button that's not working on " Open Positions " section)

Below you can download my files. You can check index.html file.

I add this javascript from the link

$(function() {
    $( "#dialog" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        }
    });

    $( "#opener" ).click(function() {
        $( "#dialog" ).dialog( "open" );
    });
});

And added following lines for that javascript:

<div id="dialog" title="Contact Us">
    <p>info@info.info</p>
</div>
<button id="opener">Open Dialog</button>

Why it's not working?

Another question; instead of using this jquery ui component, how can i jump to content to "Contact Us" section from "Open Positions" section? This also i wonder because they both in same html file.

Answer 1

Did you try show ?

$( "#opener" ).click(function() {
    $( "#dialog" ).dialog( "show" );
});

Got the error in your file: It is incorrect reference to the CSS:

<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="http://code.jquery.com/ui/1.11.0/jquery-ui.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.11.0/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="http://jqueryui.com/resources/demos/style.css">

---

There's an extra reference to jQuery twice that caused the issue. Please remove the other version of jQuery and move all the scripts to the bottom.