I have a basic accordion that will run in an HTA (local machine).

However - the problem I am facing is not just seen in HTA, but also in regular web pages.

Problem is any accordion level within a SPAN tag will not behave as needed (to hide when another heading is clicked).

I would like to remove a level in the accordion dynamically. The accordion is JS of course, but unfortunately, most of the code that will dictate if the level is removed is in VBS.

Here is the basic JS at the top of the webpage:

2. <script type="text/javascript" src="jquery.js"></script> 
3.  
4. <script type="text/javascript"> 
5. $(document).ready(function(){
7. $(".accordion h3:first").addClass("active");
8. $(".accordion p:not(:first)").hide();
9.  
10. $(".accordion h3").click(function(){
11. $(this).next("p").slideToggle("slow")
12. .siblings("p:visible").slideUp("slow");
13. $(this).toggleClass("active");
14. $(this).siblings("h3").removeClass("active");
15. });
16.  
17. });
18. </script> 

Here is the HTML that is causing the issue.

2. <div class="accordion"> 
3.       <h3>Question One Sample Text</h3> 
4. <p>Test 1</p> 
6.       <h3>This is Question Two</h3> 
7. <p>Test 2</p> 
9.       <span id="alterDynamically">
10.             <h3>Problem Heading</h3> 
11.             <p>This paragraph will NOT hide because it is nested in a SPAN.</p> 
12.       </span>
13.       
14.       <h3>Sample Question Heading</h3> 
15. <p>Num 3</p> 
16. </div>

So on line 9 you see a SPAN.

My VBS will simply do something like

1. alterDynamically.InnerHTML = ""

This does work - it removes that level in the accordion.

HOWEVER, before it is removed, or if it is not required to be removed then this level never closes.

Where I can click on any heading and all other visible levels close, this one never closes.

I believe the problem is:

2. $(this).next("p").slideToggle("slow")
3. .siblings("p:visible").slideUp("slow");

When nested within the SPAN, the .siblings constructor cannot see the P - it can only see the SPAN.

If I change the .siblings to SPAN:visible, then the entire SPAN disappears when sliding up (which is expected through the code I guess).

Can anyone figure out a way that I can keep the SPAN tags there and allow the P tag below it to behave in the same way as any other P tag outside of the SPAN?