An accordion I created works perfectly here: https://rjrwebz.com/leathernecks-new/admin-portal-unlocked.php — when you click on a title, the dropdown opens and when you click on the next title, its dropdown opens and the previous one closes. However on this page: https://rjrwebz.com/index.php — the accordion opens when a title is clicked on but does NOT close when the next title is clicked on.
I want the accordions to open and close sequentially as they do on the admin-portal page but I cannot find where/what in the code is different and causes the issue. Can someone help me detect what I need to correct in the index.php page to fix the accordions to properly open/close when clicked?
For the life of me, I cannot locate what’s causing this.
To review, please visit: https://rjrwebz.com/leathernecks-new to review. As soon as I get this issue resolved, the client wants the site published.
It is a little hard to troubleshoot from the published pages. However, one problem may be that for the non-working page the <div> just above your accordion has the same id as your accordion section. I don’t really know Bootstrap that well to know how it targets elements. I didn’t see any other custom JS being loaded, but I may have missed it.
Open HTML editor. You will immediately see an error on line 117 - the ID value panels1 must be unique.
That is your problem.
On line 107 you have the same id assigned to that div. Change it to panel1 (take out the s) and your accordion will work.
Always look for HTML errors as your clue to the problem. FYI, this took me about an hour to figure out. I started by inserting a new accordion which worked fine. I then copied and pasted your existing accordion to a blank Bootstrap 4 document and it worked. That indicated to me that the problem was an error in your existing page’s code.
GOT IT!! You both noting (@RobM and @Printninja) that there were two panels led me to see that the first panel was a left-over from a previous page build and did not completely delete when I removed it via the GUI. I removed it in the code and renamed the second panel “panels1” and am now getting the results that I want.
As soon as my client stops jumping up and down, I can publish the site.
You folks never fail me and so I’ll never let you be
I’m guessing that RobM (all due respect) just looked at the code, saw a mistake, and that happened to be the problem.
I actually opened the site and legged through it detective-style it until I got it working. Then I came back and posted my results, knowing I had fixed the problem. That’s when I saw Rob had already discovered the guilty suspect. So props to RobM!
(Confession, I do get a small amount of guilty pleasure out of solving Randy’s conundrums.)
