Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

JavaScript Help - FAQ Accordion Style


jbryan

Question

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>

 

Link to post
  • Answers 4
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

4 answers to this question

Recommended Posts

  • 0
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.

Hello I'm Thomas. I've been getting websites up and running for 26 years. I want to help you at whatever level meets your needs, from as little (if you're a DIYer) to as much as you need.

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...