img gallery inside accordion not working.

img gallery inside accordion not working.

Hello. First of all, sorry I just posted this 3 times by mistake, deleted one of them and now non of the three work (404 error on the forum) so thats why Im reposting.

My problem is that inside an accordion, I cant put a image gallery plugin (tried several) and they work outside of it.

My code is

  1. <script src="js/jquery-1.9.1.min.js" type="text/javascript"></script>
    <script src="js/jquery-ui.1.10.2.min.js" type="text/javascript"></script>
    <link href="css/jquery-ui.1.10.2.css" rel="stylesheet" type="text/css" />
    .accordionWrapper a, .accordionWrapper a:visited
    {
        font-size: 24px;
        color: #000000;
        line-height: 26px;
        display: block;
        position: relative;
        outline-width: medium;
        outline-style: none;
        transition-property: color;
        transition-duration: 0.2s;
        transition-timing-function: ease-in-out;
        transition-delay: 0s;
        padding: 0;
        margin: 0;
    }
    .accordionWrapper a:hover
    {
        color: #ee0000;
        transition-property: all;
        transition-duration: 500ms;
        transition-timing-function: ease;
        transition-delay: 0s;
    }
    .accordionHeader
    {
        font-size: 24px;
        color: #000000;
        background: transparent;
        border: 0;
        position: relative;
        outline-width: medium;
        outline-style: none;
        cursor: pointer;
        text-align: center;
        padding: 0;
        margin: 0;
    }

    HTML
    ---------
    ---------

    <div id="menuAccordion" class="accordionWrapper">
        <a class="accordionHeader">INFO<br /><br /><hr /></a>
        <div class="content st-content">
            html content or image gallery
        </div>
        <a class="accordionHeader">INFO2<br /><br /><hr /></a>
        <div class="content st-content">
            html content or image gallery
        </div>
        <a class="accordionHeader">INFO3<br /><br /><hr /></a>
        <div class="content st-content">
            html content or image gallery
        </div>
    </div>


    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("#menuAccordion").accordion({
                animated: 'easeslide',
                collapsible: true,
                active: false
            });

        });
    </script>






































































Any idea of how I can put the gallery on one of the content divs "isolated" so it works?

Thanks!