[ARCHIVED] Troubleshooting Active Buttons in HTML

[ajmiller]

I am trying to design a page with multiple toggle buttons. My problem is when I add more than one toggle button they are both activated. I need to set up my page so that when I click each button they work independently and only one set of information is revealed. I would love if someone would be willing to look at the page/code and tell me what is missing. I'm sure it's something simple, but the Canvas LMS doesn't accept my usual coding libraries. 

CODE BELOW: 

<table style="border-collapse: collapse; width: 100%;" border="1">
<tbody>
<tr>
<td style="width: 33.3333%;">semester 1 graphic</td>
<td style="width: 33.3333%;">SUMATUN</td>
<td style="width: 33.3333%;"><span class="element_toggler btn btn-primary" role="button" aria-controls="instructions" aria-label="Toggler toggle list visibility" aria-expanded="false"><img src="https://garlandisd.instructure.com/courses/28880/files/77288/preview" alt="Enter Button (small).png" width="205" height="102" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/files/77288" data-api-returntype="File" /></span>
<ul id="instructions" style="list-style: none; display: none;">
<li>
<p><a title="Week 10: Intercession Week" href="%24CANVAS_OBJECT_REFERENCE%24/modules/gadc7fba6025eba16f9f7ab40af2fe112">Week 10: TITLE (10/12 - 10/16)</a><br /><a title="Week 11: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8350" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8350" data-api-returntype="Module">Week 11: TITLE (10/19 - 10/23)</a><br /><a title="Week 12: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8353" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8353" data-api-returntype="Module">Week 12: TITLE (10/26 - 10/30)</a><br /><a title="Week 13: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8356" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8356" data-api-returntype="Module">Week 13: TITLE (11/2 - 11/6)</a><br /><a title="Week 14: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8361" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8361" data-api-returntype="Module">Week 14: TITLE (11/9 - 11/13)</a><br /><a title="Week 15: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8365" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8365" data-api-returntype="Module">Week 15: TITLE (11/16 - 11/20)</a></p>
<p style="padding-left: 40px;"><a style="font-family: inherit; font-size: 1rem;" title="Thanksgiving Holiday" href="https://garlandisd.instructure.com/courses/28880/modules/8364" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8364" data-api-returntype="Module">Thanksgiving Week</a></p>
<p style="padding-left: 40px;"><a style="font-family: inherit; font-size: 1rem;" title="Thanksgiving Holiday" href="https://garlandisd.instructure.com/courses/28880/modules/8364" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8364" data-api-returntype="Module"></a><a title="Week 16: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8368" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8368" data-api-returntype="Module">Week 16: TITLE (11/30-12/4)</a></p>
<p style="padding-left: 40px;"><a title="Week 18: TITLE " href="https://garlandisd.instructure.com/courses/28880/modules/8370" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8370" data-api-returntype="Module">Week 17: TITLE (12/7-12/11)</a></p>
<p style="padding-left: 40px;"><a title="Week 19: TITLE" href="%24CANVAS_OBJECT_REFERENCE%24/modules/g45fbd3672a782d47e58e1060cf9be3d2" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/27021/modules/4745" data-api-returntype="Module">Week:18 TITLE (12/14-12/18)</a></p>
<p style="padding-left: 40px;"><a title="Winter Break" href="https://garlandisd.instructure.com/courses/28880/modules/8372" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8372" data-api-returntype="Module">Winter Break</a></p>
</li>
</ul>
</td>
</tr>
</tbody>
</table>
<p><span class="Semester 1" role="button" aria-controls="instructions" aria-label="Toggler toggle list visibility" aria-expanded="false"><img src="https://garlandisd.instructure.com/courses/28880/files/77288/preview" alt="Enter Button (small).png" width="205" height="102" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/files/77288" data-api-returntype="File" /></span></p>
<ul id="instructions" style="list-style: none; display: none;">
<li>
<p><a title="Week 10: Intercession Week" href="%24CANVAS_OBJECT_REFERENCE%24/modules/gadc7fba6025eba16f9f7ab40af2fe112">Week 10: TITLE (10/12 - 10/16)</a><br /><a title="Week 11: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8350" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8350" data-api-returntype="Module">Week 11: TITLE (10/19 - 10/23)</a><br /><a title="Week 12: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8353" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8353" data-api-returntype="Module">Week 12: TITLE (10/26 - 10/30)</a><br /><a title="Week 13: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8356" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8356" data-api-returntype="Module">Week 13: TITLE (11/2 - 11/6)</a><br /><a title="Week 14: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8361" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8361" data-api-returntype="Module">Week 14: TITLE (11/9 - 11/13)</a><br /><a title="Week 15: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8365" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8365" data-api-returntype="Module">Week 15: TITLE (11/16 - 11/20)</a></p>
<p style="padding-left: 40px;"><a style="font-family: inherit; font-size: 1rem;" title="Thanksgiving Holiday" href="https://garlandisd.instructure.com/courses/28880/modules/8364" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8364" data-api-returntype="Module">Thanksgiving Week</a></p>
<p style="padding-left: 40px;"><a style="font-family: inherit; font-size: 1rem;" title="Thanksgiving Holiday" href="https://garlandisd.instructure.com/courses/28880/modules/8364" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8364" data-api-returntype="Module"></a><a title="Week 16: TITLE" href="https://garlandisd.instructure.com/courses/28880/modules/8368" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8368" data-api-returntype="Module">Week 16: TITLE (11/30-12/4)</a></p>
<p style="padding-left: 40px;"><a title="Week 18: TITLE " href="https://garlandisd.instructure.com/courses/28880/modules/8370" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8370" data-api-returntype="Module">Week 17: TITLE (12/7-12/11)</a></p>
<p style="padding-left: 40px;"><a title="Week 19: TITLE" href="%24CANVAS_OBJECT_REFERENCE%24/modules/g45fbd3672a782d47e58e1060cf9be3d2" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/27021/modules/4745" data-api-returntype="Module">Week:18 TITLE (12/14-12/18)</a></p>
<p style="padding-left: 40px;"><a title="Winter Break" href="https://garlandisd.instructure.com/courses/28880/modules/8372" data-api-endpoint="https://garlandisd.instructure.com/api/v1/courses/28880/modules/8372" data-api-returntype="Module">Winter Break</a></p>
</li>
</ul>

[jisaacs]

Currently there are no links pointed to those buttons. There are no <h ref> tags associated with them. 

I'm actually also in Garland ISD. If you go to your account settings > private messenger > accept you can send me a private message and I can give you my email so I can help you out, or we can troubleshoot here on this community board.