Activating Tabs and Accordion after jQuery update

Question

I have updated jQuery JS by replacing my 1.8.2 with the latest 1.10.2 and here it is - my Tabs and Accordion does not work anymore. I had Accordion within tabs working well before, surely something must be altered to bring it back but with my limited knowledge of JS I believe there is no an easy way apart from rolling back to 1.8.2, which frankly speaking I do not want to do. So my question is - how to correctly update JS within existing html structure to preserve functionality. Any advice, at least at where to look? Thanks.

Below is the structure of Accordion within tabs I have:

<div id="Chapters">                             <!--Begin Tabs-->
  <ol type="1">
   <li><a href="#Ch1">Chapter 1</a></li>
   <li><a href="#Ch2">Chapter 2</a></li>
   <li><a href="#Ch3">Chapter 3</a></li>
  </ol>


  <div id="Ch4" title="Chapter 4">
<h2 class="Chapter">Chapter 4</h2>
<div class="SubChapter" id="SubCh1" title="Title chapter 4">
    <h3>Title chapter 4</h3>
    <div><p>content</p></div>

<div class="questions">                          <!--Begin Accordion -->
<div id="QBlock">                           
 <table id="QTable">
 <tr><td><div id="QNumber">4.1</div></td>
     <td><div id="QText">text of question</div></td>    <!-- Accordion panel header -->
        </tr></table></div>
<div>
    <table id="RTable">                                 <!--Accordion panel content -->
<tr><td><div id="Guidance"><p>Content</p></div></td>
    <td><div id="Response" class="Response">
  <label><input type="radio" name="Radio401" value="Y" id="Radio_401Y" onchange='radioChange(this, "401")'>Yes</label>
    <label><input type="radio" name="Radio401" value="N" id="Radio_401N" onChange='radioChange(this, "401")'>No</label>
    <label><input type="radio" name="Radio401" value="NS" id="Radio_401NS" onChange='radioChange(this, "401")'>Not Seen</label>
    <label><input type="radio" name="Radio401" value="NA" id="Radio_401NA" onChange='radioChange(this, "401")'>Not Applicable</label>
</div>
<span id="responseDetails">
  <div id="Observation">
  <label for="observation">Observation:</label>
  <textarea name="observation" id="Obs401"></textarea></div>
  <div id="DueDate">
  <label for="DueDate">Due date:<br></label>
  <input name="DueDate" type="date" id="DueDate401"/>
  </div>

  <div id="actions">
  <label for="actions">Actions required to correct and/or prevent this observation:</label>
  <textarea name="actions" id="pa401"></textarea>
  </div>
</span>
</td>
</tr>
</table>
</div>

Answer 1

When pasting new jQuery JS codes into your existing files (not external js), make sure to avoid overwriting this piece of code:

<script>
$(function () {

        $(".questions").accordion();
        $("#Chapters").tabs();

        // Hover states on the static widgets
        $("#dialog-link, #icons li").hover(
            function () {
                $(this).addClass("ui-state-hover");
            },
            function () {
                $(this).removeClass("ui-state-hover");
            }
        );
    });
</script>