JavaScript Help - FAQ Accordion Style

Site URL: https://www.johnbryandesign.com/services/

When you open one FAQ question, you cannot close it.

Here's my JavaScript:

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script>
  $(document).ready(function(){
  $('.markdown-block .sqs-block-content h3').addClass('ui-closed').css('cursor','pointer');
  $('.markdown-block .sqs-block-content h3').css('cursor','pointer');
  $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideToggle();
  $(".markdown-block .sqs-block-content h3").click(function() {
    $(".markdown-block .sqs-block-content h3").nextUntil("h3").slideUp();
    $(".markdown-block .sqs-block-content h3").removeClass('ui-open');
    $(".markdown-block .sqs-block-content h3").addClass('ui-closed');
$(this).nextUntil("h3").slideDown();
    $(this).toggleClass('ui-closed ui-open');
  });
});
</script>

Hi @jbryan

Check this post please!

Please use the like button if it helps you!

Best,
Leopold

Still looking for a solution to this issue.

7 hours ago, jbryan said:

Still looking for a solution to this issue.

I suggest something like the following.

Put the following in Page Settings > Advanced > PAGE HEADER CODE INJECTION. If you are not on the business plan or above then put it in Design > Custom CSS minus the style tag.

<style>

  #page-section-5f66467c84df667bd7d0bd2f .sqs-block-markdown h3 {
  
    border: solid 2px;
    cursor: pointer;
    font-size: 1.4rem;
    padding: 12px;
    
    }
    
  #page-section-5f66467c84df667bd7d0bd2f .sqs-block-markdown h3:hover {
  
    background-color: black;
    color: white;
    
    }
    
  #page-section-5f66467c84df667bd7d0bd2f .sqs-block-markdown p {
  
    display: none;
    
    }
    
  </style>

Put the following in Settings > Advanced > Code Injection > HEADER.

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Put the following in Settings > Advanced > Code Injection > FOOTER.
 

<script>

  $( ( ) => {
  
    $( '#page-section-5f66467c84df667bd7d0bd2f .sqs-block-markdown h3' ).click ( function ( ) {
    
      $( this )
      
        .nextUntil ( 'h3' )
        
        .slideToggle ( 'slow' );
        
      } );
      
    } );
    
  </script>

The previous was designed specially for the site mentioned.

Replace any previous CSS or jQuery code related to the issue at hand. Make a copy of it somewhere in case you want to revert.

If you are dependent on version 1 of the jQuery library I think the Javascript can be adapted to work with it.

Let us know how it goes.

Remove all of your code and use this extension without coding and worrying about code!

Is there any problem else?