Having trouble putting a lightbox inside an accordion in .html

Question

I'm currently trying to place this lightbox into this accordion

I've had them both working seperately okay, but I don't seem to be able to get them to work on the same page (whether or not one is inside the other)

I've noticed that I've ended up with:

<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="js/jquery-1.10.2.min.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

In my header, which might be one duplicating a more recent version of the other etc and was wondering if that could be a problem?

In the html I have:

<div id="accordion" style="width:1000px; border: 1px solid black">
    <h4> Section 1 </h4>
    <div>
        <p> Text </p>
        <a href="images/image.jpg" data-lightbox="images"><img src="images/image.jpg"/></a>
    </div>
</div>

Is there something I'm trying to do incorrectly, or is this something that just won't work in this way?

Thanks in advance for any help!

Answer 1

As I thought above, I had used the two different versions of JQuery and loading them both was causing a little bit of confusion.

To solve this I removed one of the JQuery sources:

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery-ui-1.10.3.js"></script>
<script src="js/lightbox-2.6.min.js"></script>

(I have also changed the sources to be local, rather than referencing a website)

Though I didn't remove the oldest, this appeared to work better for the versions of things I was trying to load. Hope this helps someone else at some point too.