I have a couple of divs of questions for an faq. The faq was coded in a way that the active panel for a question expands when clicked but the first question opens by default. Now I want to make each panel to have its unique URL when clicked.
<div class="row faq_links">
<h1 class="faq-header">Frequently Asked Questions</h1>
<div id="accordion" class="faq-column">
<div id="faq1" class="panel tabcontent">
<p class="header">What is ....?</p>
<p class="body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div id="faq2" class="panel tabcontent" onClick="goTo(this)">
<p class="header">How does ... Work?</p>
<p class="body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
<div id="faq3" class="panel tabcontent">
<p class="header">Who are ...?</p>
<p class="body">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
</div>
</div>
function goTo (panel) {
var url, faqs, para
url = window.loaction;
faqs = faq.getElementsByClassName("tabcontent");
for (i = 0; i < faqs.length; i++) {
para = faqs[i].getElementsByTagName("p")[0];
if (url == panel) {
url.replace(url + id);
}
}
I want to make each panel to have its unique URL when clicked but I'm stuck.