Question

I am trying to use jQuery accordion widget. I want to use a common javascript code inside all the accordion section. For e.g I am trying to make a tab view inside every accordion section. The tab view is handled through an external javascript file created by me. Also I am using images slideshow inside every section of the accordion.It works for the a single section only. Whenever i try to paste the same html code in the next section of the accordion , javascript does not execute. The accordion still works. Waiting for your suggestions.

This is the html code

            <div id="contentList"><h3 class="accHead" onclick="initAll('FoodCheck')">Food Check</h3>
        <div class="accContent">


                    <ul class="menuHoriz">
                        <li><a href="#" onclick="setView('what')">What ? </a></li>
                        <li><a href="#" onclick="setView('how')">How ? </a></li>
                        <li><a href="#"  onclick="setView('who')">Who ? </a></li>
                        <li><a href="#"  onclick="setScreenshotsView()">Screenshots </a></li>
                    </ul>



                    <div id="what" class="content">
                        <p>
                            Details about the projects<br /> What. description
                        </p>    

                    </div>
                    <div id="how" class="content">
                        <p>
                            Details about the projects<br /> How description
                        </p>    

                    </div>
                    <div id="who" class="content">
                        <p>
                            Details about the projects<br /> Who description
                        </p>    

                    </div>
                    <div id="screenshots" class="content">
                        <p>
                            <h2>FoodCheck Snapshots</h2>
                            <img height="468" width="250" src="images/FoodCheck/Screen_1.png" alt="First screen" id="slideshow" />
                            <div id="imgText"> &nbsp; </div>
                            <br clear="all" />
                            <form action="#">
                                <input type="button" id="prevLink" value="&laquo; Previous" />
                                &nbsp;<input type ="button" id="startAgain" value="Start Again">
                                <input type="button" id="nextLink" value="Next &raquo;" />
                            </form>
                        </p>    

                    </div>


        </div>

This is one of the section of accordion.
There are 3 more such sections. Each section has a Tabs (with id What, who, how, screenshots) in it which are controlled by an external javascript

In

<script type="text/javascript">
    $(function() {

        //set up the news accordion on the lower page
    $("#contentList").accordion({ header: "h3", collapsible: true});

  });

</script>

Answer 1

You will have to subscribe to element events and not use some global javascript functionality. Every acordion view can have various controls but they would need to be distinguished by either class or id attributes to attach to their events.

Some code would help of course. Can you provide some? but only relevant parts so ot won’t be overwhelming.