Open/Expand a FAQ list using jQuery maybe when user clicks on it

JavaScript
1

I have the following HTML content on the FAQ page.

<div id="block-companysubtheme-content" class="block block-system block-system-main-block panel o-box">
  
   <article data-history-node-id="1576" about="/services/faq">
      <div class="node__content">
         
         <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
            <h2>General</h2>
            <ul class="list--faq">
               <li aria-controls="faq-0" aria-expanded="false" tabindex="0">How can I contact the company with questions about your&nbsp;services?</li>
               <li id="faq-0" style="display: none;">Please contact us through phone.</li>
               <li aria-controls="faq-1" tabindex="0" aria-expanded="true">How old does parts need to be for food testing?</li>
               <li id="faq-1" style="display: none;">There is no time limit for testing.</li>
               <li aria-controls="faq-2" aria-expanded="false" tabindex="0">What is the cost of services?</li>
               <li id="faq-2" style="display: none;">The cost of services  varies.&nbsp;See the information page specific for the details</li>
               <li aria-controls="faq-3" aria-expanded="false" tabindex="0">What are my payment options?</li>
               <li id="faq-3" style="display: none;">You can pay online or mail a check.</li>
              
            </ul>
         </div>
        </div>
   </article>
  
</div>

Notice that all the answer list elements have style set to display:none; as shown above. Once used clicks on the question, let’s say I clicked on this question <li aria-controls="faq-0" aria-expanded="false" tabindex="0">How can I contact the company with questions about your&nbsp;services?</li>, then the CSS of its answer changes to the following:
<li id="faq-0" style="display: block; transition: all 300ms ease-in 0s;" data-slide-toggle="true">Please contact us through phone</li>

Overall, the above shared HTML content will look like this with the open question:

<div id="block-companysubtheme-content" class="block block-system block-system-main-block panel o-box">
  
   <article data-history-node-id="1576" about="/services/faq">
      <div class="node__content">
         
         <div class="clearfix text-formatted field field--name-body field--type-text-with-summary field--label-hidden field__item">
            <h2>General</h2>
           <ul class="list--faq">
		        <li aria-controls="faq-0" aria-expanded="false" tabindex="0">How can I contact the company with questions about your&nbsp;services?</li>
				<li id="faq-0" style="display: block; transition: all 300ms ease-in 0s;" data-slide-toggle="true">Please contact us through phone</li>
				<li aria-controls="faq-1" tabindex="0" aria-expanded="true">How old does an animal need to be for DNA testing?</li>
				<li aria-controls="faq-1" tabindex="0" aria-expanded="true">How old do parts need to be for food testing?</li>
                <li id="faq-1" style="display: none;">There is no time limit for testing.</li>
                <li aria-controls="faq-2" aria-expanded="false" tabindex="0">What is the cost of services?</li>
                <li id="faq-2" style="display: none;">The cost of services  varies.&nbsp;See the information page specific for the details</li>
                <li aria-controls="faq-3" aria-expanded="false" tabindex="0">What are my payment options?</li>
                <li id="faq-3" style="display: none;">You can pay online or mail a check.</li>
          </ul>
         </div>
        </div>
   </article>
  
</div>

What I am trying to achieve is the following:

If a user is directed to this page from an external website with the URL, let’s say: http://localhost:8080/services/faq#faq-0, then I want to expand the list for them.

The way I am attempting it like this in my javascript code:

var hash = window.location.hash;
alert(hash);
$(hash).show();

But this does nothing. So do I need to specifically insert the CSS style="display: block; transition: all 300ms ease-in 0s;" data-slide-toggle="true" for the list element with id faq-0 using jQuery? Is that the way to proceed?

2

Have you tried triggering a click on the element as though a user had selected it ?

e.g.

$( hash ).trigger( "click" );

3

Didn’t try that.

I had to change the CSS completely to make it work:

let hash = window.location.hash;

//testing
hash = "#faq-3";

if(hash){
  $(hash).css({"display" : "block","transition":"all 300ms ease-in 0s"}).data("slide-toggle",true);
}

But above solution just takes me to the answer of that question without showing me the question. I’m wondering if it’s possible se question as well.

4

I think we’d need to see a codepen or similar to offer more help as we need to know how your page is functioning.

You say the question is not displayed so what is the usual manual procedure for this task?

As I mentioned above the easiest course of action is to trigger clicks on the elements in the same way a user would select things and then the original code to open and close happens as normal.

It does depend on how it’s set up though but that’s the approach I would try first.

5

this worked for me…

basic HTML

 <ul>
  <li>How can I contact the company with questions about your&nbsp;services?</li>
  <li id="faq-0">Please contact us through phone.</li>
  <li>How old does parts need to be for food testing?</li>
  <li id="faq-1">There is no time limit for testing.</li>
  <li>What is the cost of services?</li>
  <li id="faq-2">The cost of services  varies.&nbsp;See the information page specific for the details</li>
  <li>What are my payment options?</li>
  <li id="faq-3">You can pay online or mail a check.</li>            
 </ul>

basic CSS

#faq-0,#faq-1,
#faq-2,#faq-3 {
   display: none;
   font-weight: bold;
   color: #00f;
}

basic JavaScript

(function() {
   var hash = location.hash.replace( '#','' ), 
       elem = document.getElementById( hash );
       elem.style.display = 'block';
}());
6

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.